从 JSON 自动生成 HTML答案

【问题标题】：Automatically generate HTML from JSON从 JSON 自动生成 HTML
【发布时间】：2011-08-08 07:44:38
【问题描述】：

我正在开发一个模板系统。我想作为普通用户，您可以创建一个。 json 文件，系统会根据该文件自动生成 html。我对如何处理它感到很迷茫。也许我可以创建一个遍历所有对象的递归循环，然后......（我迷路了）。

JSON 外观示例：http://pastebin.com/cJ376fiF。

生成的 HTML 应如下所示：http://pastebin.com/e4EytHm1。

【问题讨论】：

作为用户，我宁愿编写 HTML，也不愿编写描述网页外观和内容的 json。另外，您是否考虑过如何处理样式？
你不能使用jQuery和它的模板插件有什么原因吗？
您真的在 JSON 和 HTML 之间节省了很多吗？ label 和fieldset 似乎暗示您的普通用户 必须具备一些HTML 元素的知识。
我不明白您为什么要生成与您想要的格式不同的格式。 JSON 非常适合将 data 发送到多个（通常是异构的）客户端。但如果客户想要 HTML，只需发送 HTML。您还可以将数据格式化为 XML，然后使用 XSLT 将其转换为 HTML（最好在服务器上，但也可以在客户端上）或用于不同客户端的任何其他标记。
好点。我确信，我将使用 XML 或仅使用 HTML。谢谢大家;)

标签： javascript html json templates

【解决方案1】：

http://www.json2html.com/

“json2html 是一个开源的 jQuery 插件，它依赖于 JSON 转换将 JSON 对象转换为 HTML。”

【讨论】：

这太棒了。

【解决方案2】：

可能有点晚了，我打算做一些类似的事情，并且遇到了这个线程，但是有一些代码，回调函数是从一个 XHR 对象调用的，该对象从当前静态文件“response.json”中获取数据

function callback(req)
{
    var response = eval("("+req.responseText+")");
    response = response.response;

    createElementsFromJSON(response, document.body);
}

function createElementsFromJSON(json, parent)
{
    for(var i in json)
    {
        var object = json[i];

        var obj = document.createElement(object.element);

        for(var tag in object)
            if (tag!="children"&&tag!="element")
                obj.setAttribute(tag, object[tag]);

        parent.appendChild(obj);

        if (typeof(object.children)=="object")
            createElementsFromJSON(object.children, obj);
    }
}

JSON：

{
    "response":
    [
        {
            "element":"div",
            "id":"james",
            "children":
            [
                {
                    "element":"h1",
                    "id":"bob",
                    "innerHTML":"bobs content",
                },
                {
                    "element":"h2",
                    "id":"rob",
                    "innerHTML":"robs content",
                },
                {
                    "element":"p",
                    "innerHTML":"some random text",
                },
            ],
        },
        {
            "element":"div",
            "id":"alex",
            "innerHTML":"this is a test message in a div box",
        },
    ]
}

【讨论】：

简单而小巧——非常好。谢谢！

【解决方案3】：

我为自己的项目做了一个不起眼的尝试，通过 JSON 动态生成 html 内容。你可以在这里试试fiddle。由于 JSON 格式不同，欢迎你 fork。

示例 JSON 格式如下所示。

var innerhtml = {
  type: 'b',
  content: ['This is BOLD text.', {
    type: 'i',
    content: ' Italics came from Italy? Its 35px and bold too.',
    style: 'font-size:35px;'
  }]
};

var htmlArr = {
  type: 'div',
  content: {
    type: 'p',
    content: ['Simple text with no formatting.', innerhtml, {type : 'img', src : '//www.gravatar.com/avatar/476914f28548ce41b3b7b2c5987720a9/?default=&s=64'}]
  }

};

【讨论】：

【解决方案4】：

jQote2 是一个优秀的 javascript 模板插件，它至少应该是一个很好的基准。它以一种非常方便的方式将 JSON 解析为 HTML 模板。 http://aefxx.com/jquery-plugins/jqote2/

【讨论】：

这似乎合乎逻辑，我认为他只是想自己建造一个
这也是我得到的图像。我仍然会首先使用一些现有的解决方案来查看好/坏部分。并浏览一些更好的解决方案的代码，特别是如果对如何实现类似系统有点迷茫。
我只是在 here 上做的，类似于 stackOverFlow 上的一个问题。它是纯javascript。

【解决方案5】：

@topherg

更早将 obj 绑定到父级更快 - 直接在 createElement 之后。

当你来到 object.children 时，你应该检查一下：

if(object.children.constructor===Array){
  for(var i=0;i<object.children.length;i++)
     createElementsFromJSON(object.children[i],obj);
}else{
   createElementsFromJSON(object.children,obj);
}

否则不会解析数组。

SetAttribute 很慢，但有时您需要它来处理 (name,item*,data-*,rel,objekt,param,loop,datetime,style[如果您不想解析其他对象],colspan,. ..)。直接设置属性 (element.style.width="100px";) 速度提高了 88 倍 (jsPerf)。

创建一个 DOM 元素比 innerHTML 更快。直接构建一个 DOM 树，花费了 innerHTML 的两倍时间。甚至 innerHTML 也非常快，这种 DOM 解析也仍然很快。

【讨论】：