从JSON自动生成HTML

Question

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

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

生成的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",
        },
    ]
}