Разместить ответ несколько 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), но как это все вписать в мою концепцию пока каша в голове. |
Допустим пришёл такой 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 могло бы иметь несколько способов представления. |
Круто!!, правда не все понял =(
action: (element, data, index) => {} Это чего такое, что за синтаксис(=>{})? не знаю что на гуглить |
|
Подскажите что не так опера 36 версии ругается на
document.querySelectorAll(handler.selector) в for(var element of document.querySelectorAll(handler.selector)) Говорит Uncaught TypeError: document.querySelectorAll(...)[Symbol.iterator] is not a function |
pokk,
document.querySelectorAll(...) - не вполне массив, это коллекция элементов, поэтому не все методы для массивов работают с эти объектом. Кроме того, for ... of работает не во всех браузерах: в ИЕ не работает. Работает обычный цикл for(var i = .... { ... document.querySelectorAll(...)[i] ... } или forEach в таком варианте: [].forEach.call(document.querySelectorAll(...), function(element) {.....}) Все методы перебора массивов |
Часовой пояс GMT +3, время: 19:01. |