Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2018, 08:43
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Разместить ответ несколько 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), но как это все вписать в мою концепцию пока каша в голове.

Последний раз редактировалось pokk, 22.02.2018 в 08:45.
Ответить с цитированием
  #2 (permalink)  
Старый 22.02.2018, 09:55
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Допустим пришёл такой 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 могло бы иметь несколько способов представления.

Последний раз редактировалось Malleys, 22.02.2018 в 09:58.
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2018, 07:08
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

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

Это чего такое, что за синтаксис(=>{})? не знаю что на гуглить
Ответить с цитированием
  #4 (permalink)  
Старый 27.02.2018, 09:22
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

https://developer.mozilla.org/ru/doc...rrow_functions
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2018, 09:36
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Подскажите что не так опера 36 версии ругается на
document.querySelectorAll(handler.selector)
в
for(var element of document.querySelectorAll(handler.selector))
Говорит
Uncaught TypeError: document.querySelectorAll(...)[Symbol.iterator] is not a function
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2018, 10:32
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

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

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

Последний раз редактировалось Dilettante_Pro, 28.02.2018 в 10:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Селектор 'div a' alt5000 jQuery 4 14.09.2017 14:51
Взять данные из поля input(text) и добавить к содержимому div (text input + text div) ksultanov Элементы интерфейса 4 04.10.2016 19:46
Закрыть DIV при клике в нем на ссылку или баннер xavibeat Общие вопросы Javascript 1 30.03.2016 20:41
Раскрытие не полностью раскрытого div по клику MrNix21 Элементы интерфейса 2 28.03.2016 14:41
Несколько div блоков. Переключение по нажатии на соответствующую ссылку. Help$ Элементы интерфейса 4 25.09.2010 00:01