Question

我正在研究模板系统。我想，作为普通用户，你可以创建一个。 json文件，并根据该文件系统将自动生成html。我对如何接近它感到很遗憾。也许我可以创建一个遍历所有对象的递归循环然后....（好吧，我迷路了）。

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

Answer 1

http://www.json2html.com/

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

Answer 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",
        },
    ]
}

Answer 3

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

Answer 4

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

示例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'}]
  }

};

Answer 5

@topherg

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

当你来对象时，你应该检查：

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 =＆＃34; 100px＆＃34 ;;）快88倍（jsPerf）。

创建ONE DOM元素比innerHTML快。直接构建DOM树，需要两倍的innerHTML。甚至innerHTML也非常快，那种DOM解析仍然很快。

从JSON自动生成HTML

5 个答案: