javascript - 将 JSON 对象渲染成 HTML，渲染函数不渲染深层对象

Question

我有这个 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"
            }
        ]
    }
]

我正在尝试使用自调用函数呈现页面，以呈现所有 child 的 child 的 child ......但我不知道为什么我的函数只呈现两级 child 。我的功能:

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,live

Answer 1

尝试使用真正的递归函数:

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);

如果您想处理顺序，您真的应该在函数之外进行处理，以保持事情的整洁和独立。

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