将JSON对象呈现为HTML，呈现函数don't渲染深层对象

Rendering JSON object into HTML, render function don't render deep objects

本文关键字：对象函数 JSON HTML don 更新时间：2023-09-26

我有这个JSON布局：

[
    {
        "tag": "div",
        "attr": [
            ["id", "sortSideStyleIlluminated"],
            ["class", "sortSideWidget"]
            ],
        "childs": [
            {
                "tag": "img",
                "attr": [
                    ["class", "sortSide"],
                    ["src","/images/sort-side-col/style-illuminated.jpg"],
                    ["width", 185],
                    ["height", 58],
                    ["alt", "Style Illuminated"]
                ]
            },
            {
                "tag": "br"
            },
            {
                "tag": "br"
            },
            {
                "tag": "div",
                "text": "This div have childs",
                "childs": [
                    {
                        "tag": "b",
                        "text": "hellow"
                    }
                ]
            }
        ]
    },
    {
        "tag": "div",
        "attr": [
            ["id", "sortSideStyleIlluminated"],
            ["class", "sortSideWidget"]
            ],
        "childs": [
            {
                "tag": "img",
                "attr": [
                    ["class", "sortSide"],
                    ["src","/images/sort-side-col/style-illuminated.jpg"],
                    ["width", 185],
                    ["height", 58],
                    ["alt", "Style Illuminated"]
                ]
            },
            {
                "tag": "br"
            },
            {
                "tag": "br"
            },
            {
                "tag": "span",
                "text": "Widget 2"
            }
        ]
    }
]

我正在尝试使用一个自调用函数来呈现页面，以呈现childs的所有childs。。。但我不知道是什么原因，我的函数只渲染了两个级别的子。我的功能：

function renderWidgets(order){
    var result = document.createElement('div'),
    createEl = function(el){
        var element = document.createElement(el.tag);
        for(var i in el.attr){
                if(el.attr[i]) element.setAttribute(el.attr[i][0], el.attr[i][1]);
        }
        for(var i in el.childs){
            var child = createEl(el.childs[i]);
            child.innerHTML = el.childs[i].text ? el.childs[i].text : "";
            element.appendChild(child);
        }
        return element;
    };
    for(var i in order){
        if(widgets[order[i]]){
            var widgetElement = createEl(widgets[order[i]]);
            result.appendChild(widgetElement);
        }
    }
    return result;
}
document.body.appendChild(renderWidgets([0,1]));

你能看一下代码，看看这里出了什么问题吗？谢谢，

住在JSBin：http://jsbin.com/ilubic/edit#javascript，html，实时

尝试一个真正的递归函数：

function renderWidgets(widgets, container){
  var i, k, curr, element;
  for (i=0; i<widgets.length; i++) {
    curr = widgets[i];
    element = container.appendChild( document.createElement(curr.tag) );
    if (curr.text > "") {
      element.innerHTML = curr.text;
    }
    if (curr.attr && curr.attr.length > 0) {
      for (k=0; k<curr.attr.length; k++) {
        element.setAttribute(curr.attr[k][0], curr.attr[k][1]);
      }
    }
    if (curr.childs && curr.childs.length > 0) {
      renderWidgets(curr.childs, element);
    }
  }
}

称之为：

var widgets = [ /* your widget array */ ];
var result = document.createElement('div');
renderWidgets(widgets, result);

如果您想处理order，那么您确实应该在函数之外进行处理，以保持事物的干净和分离。

renderWidgets([widgets[1], widgets[0]], result);