Javascript 将嵌套json转换为html

我的任务是获取一个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!"
          }
        ]
      }
    ]
  }
]

[
{
“标记”：“节”，
“内容”：{
“标签”：“h2”，
“内容”：“欢迎访问我的页面！”
}
},
{
“标记”：“节”，
“内容”：[
{
“标签”：“h3”，
“内容”：“我最喜欢的东西”
},
{
“标签”：“ul”，
“内容”：[
{
“tag”：“li”，
“内容”：”
},
{
“tag”：“li”，
“内容”：”
},
{
“tag”：“li”，
“内容”：”
}
]
},
{
“标签”：“p”，
“内容”：[
{
“标记”：“跨度”，
“内容”：“简言之，我”
},
{
“标记”：“强”，
“内容”：“只是爱”
},
{
“标记”：“跨度”，
“内容”：“小猫！”
}
]
}
]
}
]

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

就我个人而言，我会使用像Angular（or）这样的框架，因为它们是完整的框架，可以帮助您处理很多事情。也就是说，这两种方法都可能有些过分，特别是如果您不熟悉它们，只需要从json创建一些html

更简单的解决方案是使用类似或的模板系统。两者都是很好的模板系统，后者构建在另一个模板系统之上。

---

祝你好运——我相信这会很有趣，而且比你担心的要容易一些。既然您提到了递归，那么可以使用它，但是让框架来为您做吧——更少的麻烦和更不容易出错：）

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

就我个人而言，我会使用像Angular（or）这样的框架，因为它们是完整的框架，可以帮助您处理很多事情。也就是说，这两种方法都可能有些过分，特别是如果您不熟悉它们，只需要从json创建一些html

更简单的解决方案是使用类似或的模板系统。两者都是很好的模板系统，后者构建在另一个模板系统之上。

---

祝你好运——我相信这会很有趣，而且比你担心的要容易一些。既然您提到了递归，那么可以使用它，但是让框架来为您实现它——更少的麻烦和更不容易出错：）

使用

document.createElement（“标记”）函数在内存中创建元素（
var element=document.createElement（currentLevel.tag）；
）
然后可以使用
element.appendChild（otherelement）将某些内容放入其中。
您可以通过检查currentLevel.content的类型是否为“对象”或“字符串”，来检查“内容”的类型（字符串或数组）

当它写下来的时候，不仅仅是得到你想要的元素和
targetElement.appendChild（元素）它在里面。
但是，如果您只需要html代码，那么
var HTMLcode=element.outerHTML
使用
文档.createElement（“标记”）函数在内存中创建元素（
var element=document.createElement（currentLevel.tag）；
）
然后可以使用
element.appendChild（otherelement）将某些内容放入其中。
您可以通过检查currentLevel.content的类型是否为“对象”或“字符串”，来检查“内容”的类型（字符串或数组）

当它写下来的时候，不仅仅是得到你想要的元素和
targetElement.appendChild（元素）它在里面。
但是，如果您只需要html代码，那么
var HTMLcode=element.outerHTML
在这里：

这是：

由于它是结构化的，递归是一个很好的主意。这里有一个指针：从一个对象级别开始，忘记嵌套。编写一个小函数，将上面结构的最小逻辑单元转换为适当的HTML元素。没有循环，什么都没有。将该函数添加到您的问题中。继续考虑如何重新使用该函数将项目列表转换为HTML元素列表。一旦你有了一个可以转换列表的函数，继续思考如何编写第三个转换列表的函数。这就是我的想法，但我以前只做过基本的递归问题示例。我只有一天的时间来解决这个问题，我不知道我是否会被这个问题弄得头晕目眩。@DerekW说真的-有很多框架可以让这个问题变得简单-你不必担心递归和寻找聪明的方法来解决这个问题。这是直截了当的——我在下面贴出答案。@Tomalak我刚做完。一次只做一小块，不断增加输入的复杂性，然后重新编写代码来处理它。谢谢你的建议。因为它是结构化的，递归是一个很好的主意。这里有一个指针：从一级对象开始，忘记嵌套。编写一个小函数，将上面结构的最小逻辑单元转换为适当的HTML元素。没有循环，什么都没有。将该函数添加到您的问题中。继续思考如何重用该函数t
// 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);