Javascript: как создать вложенные DIVs, начиная с JSON

Question

Возможно, это легко, но не для меня. Начиная с древовидной структуры JSON, я пытаюсь выполнить итерацию и создаю DIV для каждого узла, вложите DIV и, например, измените цвет фона каждого DIV, взяв информацию из объекта JSON. Что я сделал до сих пор это fnction:

function uiCreator(tree, page, container){ 
function iterator (obj) { 
    for (var i in obj) { 
     if (typeof obj[i] === "object" && obj[i] !== null) { 
      page.Render("createElement", "D"+i, "DIV"); //page.Render() wrap the DOM functions and saves the DOM objects inside an array 
      page.Render("createTextNode", "T"+i, i); 
      page.Render("appendChild", "D"+i, "T"+i); //appends the text node inside the DIV 
      page.Render("appendChild", container, "D"+i); //appends (or it should) the DIV to the upper level. 
      page.Render("margin", "D"+i, "10px"); 
      page.Render("border", "D"+i, "solid"); 
      page.Render("backgroundColor", "D"+i, obj[i].color); 
      if(typeof obj[i][Object.keys(obj[i])[0]] === "object") container = "D"+i; // if the first child of obj[i] is an object, container is updated 
      iterator(obj[i]); 
      if(typeof obj[i][Object.keys(obj[i])[0]] === "object") container = "D"+i; 
     } 
    } 
} 
iterator(tree); 

}

Где «дерево» структура JSON данных «страница» является объектом для манипулирования DOM (она оборачивает функции DOM и хранить ссылку в ассоциативном массиве), а «контейнер» используется как ссылка на внешний DIV, который будет содержать результаты функции (во время итераций «контейнер» обновляется для ссылки на текущий узел sctructure). Прямо сейчас эта функция работает нормально с уровнями структуры. Но не тогда, когда пришло время вернуться. Функция перебирает всю структуру в правильном направлении, я думаю, что проблема здесь:

page.Render("appendChild", container, "D"+i); 

и здесь:

if(typeof obj[i][Object.keys(obj[i])[0]] === "object") container = "D"+i; 

Спасибо!

PS: Пример используемой структуры дерева:

treeObj = { 
"01" : { 
    "01_01" : { 
     "01_01_01" : {"color" : "#F0F8FF"}, 
     "01_01_02" : {"color" : "#FAEBD7"}, 
     "01_01_03" : {"color" : "#00FFFF"}, 
     "01_01_04" : {"color" : "#7FFFD4"}, 
     "01_01_05" : {"color" : "#F0FFFF"}, 
     "color" : "#7CFC00" 
    }, 
    "01_02" : { 
     "01_02_01" : {"color" : "#F5F5DC"}, 
     "01_02_02" : {"color" : "#FFE4C4"}, 
     "01_02_03" : {"color" : "#000000"}, 
     "01_02_04" : {"color" : "#FFEBCD"}, 
     "01_02_05" : {"color" : "#0000FF"}, 
     "color" : "#FFFACD" 
    }, ... 

Answer 1

Хорошо, я не уверен, что понял, как именно, но это, кажется, работает должным образом в настоящее время. Вот новая версия функции:

function uiCreator(tree, page, container){ 
    var iter = 1; 
    var iarr = [container]; 
    function jsonIterator(obj, iter) { 
     for (var i in obj) { 
      if (typeof obj[i] === "object" && obj[i] !== null) { 
       page.Render("createElement", "D"+i, "DIV"); 
       page.Render("border", "D"+i, "solid"); 
       page.Render("createTextNode", "T"+i, i); 
       iarr[iter] = "D"+i; 
       page.Render("appendChild", "D"+i, "T"+i); 
       page.Render("appendChild", iarr[iter-1], "D"+i); 
       page.Render("margin", "D"+i, "10px"); 
       page.Render("backgroundColor", "D"+i, obj[i].color); 
       if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter++; 
       jsonIterator(obj[i], iter); 
       if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter--; 
      } 
     } 
    } 
    jsonIterator(tree, iter); 
} 

я добавил счетчик для рекурсивных итераций:

var iter = 1; 

и массив для хранения всех ключей объекта:

var iarr = [container]; 

С iarr[iter] = "D"+i; У меня всегда правильный верхний уровень для использования:

page.Render("appendChild", iarr[iter-1], "D"+i); 

И последнее, но не менее, с этим кодом:

if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter++; 
jsonIterator(obj[i], iter); 
if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter--; 

Я могу управлять рекурсию, и я увеличить или уменьшить счетчик. Надеюсь, это может быть полезно для кого-то, и любой, кто имеет лучшую идею для реализации этой функции, приветствуется!