Question

我被赋予了获取json对象的任务（它不会是这个，可能或多或少是嵌套和内容）并编写一个函数来解析它并将其附加到html页面。具体来说，他们会给我一个看起来像这样的文件，我将不得不从中获取数据。它可以是一层深或15层深。我只是不知道从哪里开始。我知道我应该使用递归r a 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

这是：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);

Answer 2

这看起来像是模板框架的工作。如果用户需要能够编辑值，有些很好，有些很好（易于使用），如果你只需要显示你的数据（单向绑定）。

我个人使用像Angular（Angular1或Angular2）这样的框架，因为它们是完整的框架，可以帮助你完成很多东西。也就是说，两者都可能过度，特别是如果你不熟悉它们，只需要从json创建一些html。

更简单的解决方案是使用Mustache或Handlebars等模板系统。两者都是很棒的模板系统 - 后者建立在另一个之上。

祝你好运 - 我相信它会比你害怕的更有趣，也更容易。既然你提到了递归，那么使用它，但让框架为你做 - 减少麻烦，减少错误：）

Answer 3

使用document.createElement("tag");功能在内存中创建元素（var element = document.createElement(currentLevel.tag);）你可以使用element.appendChild(otherelement);将一些内容放入其中。您可以通过检查typeof currentLevel.content是否是＆＃34;对象＆＃34;来检查＆＃34;内容＆＃34; s类型（字符串或数组）的内容。或＆＃34;字符串＆＃34;。

当它写下来时，不仅仅是获取你想要的元素，而是targetElement.appendChild(element);里面的元素。如果你只想要html代码，那么 var HTMLcode = element.outerHTML;

将嵌套的json转换为html

3 个答案: