Javascript：JSONからネストされたDIVを作成する方法

Question

おそらく簡単ですが、私のためではありません。 JSONツリー構造から始めて、それを反復しようとしています。各ノードにDIVを作成し、DIVをネストして、JSONオブジェクトからの情報を取得して各DIVの背景色を変更します。 私が今までやったことは、この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への参照として使用されます（「コンテナ」は、構造体の現在のノードを参照するように更新されます）。 この機能は構造レベルでうまく機能します。しかし、いつ帰るべき時期なのか。関数は、正しい方法で構造全体を反復し、私はこの問題はここにあると思う：

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

[OK]を、私はどのように正確に理解していることがわからないんだけど、正しく動作するようです。ここでは、関数の新しいバージョン：私は再帰の反復のためのカウンタを追加しました

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 iarr = [container]; 

：

var iter = 1; 

そして配列は、すべてのオブジェクトキーを格納します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--; 

私は再帰を管理することができ、私はカウンターを増減。 これは誰かにとって便利なことを望みます。この機能を実装する方がいいと思う人は大歓迎です！