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