自动从JSON生成HTML

|| 我正在模板系统上工作。我想象作为普通用户可以创建一个。 json文件，并且系统将基于该文件自动生成html。我对如何处理它完全迷失了。也许我可以创建一个遍历所有对象的递归循环，然后....（我迷路了）。有关JSON外观的示例：http：//pastebin.com/cJ376fiF。生成的HTML应该是什么样的：http：//pastebin.com/e4EytHm1。

已邀请:

5 个回复

了驳

http://www.json2html.com/ \“ json2html是一个开源jQuery插件，它依靠JSON转换将JSON对象转换为HTML。”

担每棱绰

大概有点晚了，我要做类似的事情，遇到了这个线程，但是有一些代码，回调函数是从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\",
        },
    ]
}

辩谷变充

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

缔恃钨

我为自己的项目进行了不起眼的尝试，以通过JSON动态生成html内容。您可以在这里尝试小提琴。我们欢迎您分叉它，因为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\'}]
  }

};

掸牛浓疗

@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很慢，但是有时您需要它（名称，项目*，数据-*，rel，objekt，参数，循环，日期时间，样式[如果您不想解析其他对象]，colspan，... ）。直接设置属性（element.style.width = \“ 100px \”;）快了88倍（jsPerf）。创建一个DOM元素要比innerHTML快。直接构建DOM树，需要花费innerHTML两倍的时间。即使innerHTML很快，那种DOM解析也仍然很快。

要回复问题请先登录或注册

自动从JSON生成HTML

5 个回复

发起人

json

html

javascript

templates

问题状态

自动从JSON生成HTML

与内容相关的链接

5 个回复

发起人

json

html

javascript

templates

问题状态