Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Разместить ответ несколько DIV (https://javascript.ru/forum/misc/72723-razmestit-otvet-neskolko-div.html)

pokk 22.02.2018 08:43

Разместить ответ несколько DIV
 
Добрый день, сделал функцию которая расставляет по input, div значение из ответного JSON пакета.
вкратце она выглядит так:
for (var Key in objJSON) {
				var Funct='Handler_'+Key;
				ItemVar=objJSON[Key];
				if (typeof window[Funct] == 'function'){
					//---------------------------------------------------------------------------
					//----Обработчик текушего поля найдет запускаем его  ------------------------
					//---------------------------------------------------------------------------				
						var Temp_id=document.getElementById('id_'+Key);
						if(Temp_id == null){
							console.log("Не существует:id_"+Key);
							continue;
						}
						eval(Funct+'(Key,objJSON[Key],Temp_id)');
				}
			}

достаю ключ текущего, элемента дополняю его до функции "'Handler_'+Key" и вызываю его если он есть
ну а, дальше на создавал функции, которые соответствуют ключам.
Так вот теперь у меня в ответном, пакете приходит журнал аварии в виде JSON массива,
и его надо поместить в несколько DIV, так вот обработчики этого журнала идентичны, и как то не правильно
создавать две одинаковые функции только с разным названием. Как можно можно запихать ответный пакет в несколько DIV?

Пока думаю в сторону сделать поиск по классу(LOG), а потом из найденных элементов, вытащить id, и как-то их передать функции обработчика журнала аварии(Handler_CrashLog), но как это все вписать в мою концепцию пока каша в голове.

Malleys 22.02.2018 09:55

Допустим пришёл такой JSON
{
	"user": "JoLeMi",
	"messages": ["abc", "123"],
	"id": 60
}


Вам всего лишь надо найти элементы по селектору, и для каждого элемента вызвать ваш обработчик со значением из JSON

Примерно так:

class JSONHandler {
	/**
     * @param(Object)
     */
	static process(json) {
		for(let key in json) {
			if(key in JSONHandler.Handlers == false)
				continue;

			let handler = JSONHandler.Handlers[key];
			let elementIndex = 0;
			for(let element of document.querySelectorAll(handler.selector)) {
				handler.action(element, json[key], elementIndex++);
			}
		}
	}
}

JSONHandler.Handlers = {};


Сами обработчики могут выглядеть так:
JSONHandler.Handlers = {
	"user": {
		selector: "#user",
		action: (element, data, index) => {}
	},

	"messages": {
		selector: ".message",
		action: (element, data, index) => {}
	},

	"id": {
		selector: "img.userphoto",
		action: (element, data, index) => {}
	}
};


Заметьте, я добавил селектор, т. к. свойство из JSON не обязательно может содержать информацию, к какому элементу оно относится... ведь данные не обязательно описывают, как они должны быть представлены визуально!

Кстати в обработчике объект описывающий как представить данные, мог бы быть массивом таких объектов... тогда одно и тоже поле из JSON могло бы иметь несколько способов представления.

pokk 26.02.2018 07:08

Круто!!, правда не все понял =(
action: (element, data, index) => {}

Это чего такое, что за синтаксис(=>{})? не знаю что на гуглить

MallSerg 27.02.2018 09:22

https://developer.mozilla.org/ru/doc...rrow_functions

pokk 28.02.2018 09:36

Подскажите что не так опера 36 версии ругается на
document.querySelectorAll(handler.selector)
в
for(var element of document.querySelectorAll(handler.selector))
Говорит
Uncaught TypeError: document.querySelectorAll(...)[Symbol.iterator] is not a function

Dilettante_Pro 28.02.2018 10:32

pokk,
document.querySelectorAll(...) - не вполне массив, это коллекция элементов, поэтому не все методы для массивов работают с эти объектом. Кроме того, for ... of работает не во всех браузерах: в ИЕ не работает.

Работает обычный цикл
for(var i = .... { ... document.querySelectorAll(...)[i] ... }

или forEach в таком варианте:
[].forEach.call(document.querySelectorAll(...), function(element) {.....})
Все методы перебора массивов


Часовой пояс GMT +3, время: 19:01.