Рендеринг объекта 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]));

Можете ли вы взглянуть на код и посмотреть, что здесь не так? Спасибо,

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