Страницы

Поиск по вопросам

четверг, 11 июля 2019 г.

Из JSON в HTML код

Есть JSON.
{ "body": { "div": [{ "class": "row-fluid", "style": "z-index: 27;", "div": [{ "class": "span6 droppedFields", "style": "z-index: 28;", "div": { "class": "droppedField", "name": "textID", "style": "z-index: 29;", "id": "CTRL-DIV-1001", "label": { "class": "control-label", "#text": "Text" }, "input": { "type": "text", "placeholder": "Text here...", "class": "ctrl-textbox" } } }, { "class": "span6 droppedFields", "style": "z-index: 30;", "div": { "class": "droppedField", "style": "z-index: 31;", "id": "CTRL-DIV-1002", "label": { "class": "control-label", "#text": "Email" }, "input": { "type": "email", "placeholder": "useremail.com", "class": "ctrl-textbox" } } }] }, { "class": "row-fluid", "style": "z-index: 32;", "div": { "class": "span12 action-bar droppedFields", "style": "min-height: 80px; z-index: 33;", "div": { "class": "droppedField", "style": "z-index: 41;", "id": "CTRL-DIV-1003", "label": { "class": "control-label", "#text": "Password" }, "input": { "type": "password", "placeholder": "Password...", "class": "ctrl-passwordbox" } } } }] } }
есть ли возможность построить HTML из этого JSON? и что для этого лучше использовать?


Ответ

Я бы использовал javascript и просто написал свою рекурсивную функцию которая обрабатывала бы JSON. например:
function JSONtoSTR(obj, parenttag){ //преобразовываем объект в строку if (!parenttag) parenttag = ""; //для повторяющихся тегов var str = ""; //в этой переменной будем собирать нашу строку for (var i in obj) { //перебираем все элементы в нашем объекте if (typeof (obj[i]) == "object") { //если текущий элемент объект (тег) var params = ""; //под параметры для тега var tag = i; //имя тега for (var param in obj[i]) //собираем все параметры для тега if (typeof (obj[i][param]) != "object") params += " "+param+"='"+obj[i][param]+"'"; //если текущий элемент не объект, значит это параметр if (isNaN(parseInt(i))) //если текущий элемент не число str += "<" + tag + params + ">"; //записываем тег и его параметры else { //если элемент числовой, значит имя текущего тега находится во 2 параметре нашей функции tag = parenttag; //берем предыдущий тег str += "<" + parenttag + params + ">"; } str += JSONtoSTR(obj[i], tag); //вызываем еще раз нашу функцию для следующего объекта str += ""; //закрываем текущий тег } } return str; //возвращаем готовую строку }
document.open(); document.write(JSONtoSTR(JSON)); document.close();

Комментариев нет:

Отправить комментарий