渲染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" 
      } 
     ] 
    } 
] 

我试图用一个自调用函数来呈现的所有儿童的渲染页面孩子们的孩子...但我不知道我的功能是什么原因造成了两个孩子的水平。我的功能：

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

如果你想照顾order的，你应该在功能之外做到这一点，以保持干净和独立。

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