Преобразование вложенных json в html

Question

Мне поручено взять объект json (он не будет таким, может быть более или менее вложенным и содержимым) и написать функцию, которая будет анализировать ее и добавлять ее к html-страницу. В частности, они дадут мне файл, который выглядит так, что мне придется взять данные. Это может быть один уровень глубиной или 15 уровней. Я просто не знаю, с чего начать. Я знаю, что я должен либо использовать цикл рекурсии r while, но и полностью потерянный.

Любая помощь или указатели в правильном направлении были бы полезными, спасибо.

[ 
    { 
    "tag": "section", 
    "content": { 
     "tag": "h2", 
     "content": "Welcome to My Page!" 
    } 
    }, 
    { 
    "tag": "section", 
    "content": [ 
     { 
     "tag": "h3", 
     "content": "My Favorite Things" 
     }, 
     { 
     "tag": "ul", 
     "content": [ 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/200/200'/>" 
      }, 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/201/200'/>" 
      }, 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/200/201'/>" 
      } 
     ] 
     }, 
     { 
     "tag": "p", 
     "content": [ 
      { 
      "tag": "span", 
      "content": "In short, I " 
      }, 
      { 
      "tag": "strong", 
      "content": "just love" 
      }, 
      { 
      "tag": "span", 
      "content": " kittens!" 
      } 
     ] 
     } 
    ] 
    } 
] 

Answer 1

Это похоже на работу с шаблоном. Их много, и некоторые из них хороши, если пользователь должен иметь возможность редактировать значения, а некоторые - отличные (простые в использовании), если вам нужно только отображать свои данные (односторонняя привязка).

Лично я использовал бы фреймворк, подобный Угловому (Angular1 или Angular2), поскольку они являются полным каркасом и могут помочь вам с большим количеством материала. Тем не менее, оба могут быть чрезмерными, особенно если вы не знакомы с ними и только нужно создать некоторые html из json.

Более простым решением было бы использовать систему шаблонов, такую ​​как Mustache или Handlebars. Оба являются отличными системами шаблонов - последние строятся поверх другого.

Удачи - я уверен, что это будет весело и несколько легче, чем вы боитесь. Поскольку вы упомянули рекурсии, да использовать это, но пусть рамки делать это для вас - меньше проблем и меньше ошибок :)

Answer 2

Используйте функцию document.createElement("tag"); создать элемент в памяти (var element = document.createElement(currentLevel.tag);) Чем вы можете использовать element.appendChild(otherelement); что-то внутри. Вы можете проверить, что такое тип содержимого (строка или массив), проверяя, является ли typeof currentLevel.content «объектом» или «строкой».

Когда он приходит, записывая его, а не просто получите элемент, в который вы хотите его, и targetElement.appendChild(element); внутри. Однако, если вы хотите только HTML-код, чем var HTMLcode = element.outerHTML;

Answer 3

Вот он: https://jsfiddle.net/ej4ftzcs/

// A recursive function to build DOM tree from a json structure 
function buildTree(tree, container) { 
    tree.forEach(function(node) { 

    var el = document.createElement(node.tag); 

    if (Array.isArray(node.content)) { 
     buildTree(node.content, el); 
    } 
    else if (typeof(node.content) == 'object') { 
     buildTree([node.content], el); 
    } 
    else { 
     el.innerHTML = node.content; 
    } 

    container.appendChild(el); 
    }); 
} 

// Run !!! 
buildTree(tree, document.body);