javascriptの再帰的な「解析」機能

Question

再帰的な解析機能の種類を作成しようとしていますが、機能しません。

解析されるべき配列：

gridArray = [ 
    { 
     type:"row", 
     text:"row1", 
     cols: [ 
      { 
       type:"col", 
       text:"col1", 
       rows: [ 
        { 
         type:"row", 
         text:"row1 nested", 
         cols: [{}] 
        } 
       ] 
      }, 
      { 
       type:"col", 
       text:"col2", 
       rows: [{}] 
      } 
     ] 
    } 
] 

機能：

function createHtmlCode(gridArray,level){ 

    for(var y=0; y<gridArray.length; y++){ 
     obRow = gridArray[y]; 
     r+="<div class='row'>"; 
     arCol = obRow.cols; 
     for(var x=0; x<arCol.length; x++){ 
      obCol = arCol[x]; 
      r+="<div class='col'>"; 
      if(obCol.rows){ 
       createHtmlCode(obCol.rows,level++); 
      } 
      r+="</div>"; 
     } 
     r+="</div>"; 
    } 

} 

r=""; 
createHtmlCode(gridArray,1); 

瞬間結果（r）がある：

<div class="row"> 
    <div class="col"> 
     <div class="row"> 
      <div class="col"> 
      </div> 
     </div> 
    </div> 
</div> 

...それはshoud be：

<div class="row"> 
    <div class="col"> 
     <div class="row"> 
      <div class="col"> 
      </div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="row"> 
     </div> 
    </div> 
</div> 

私は間違って何をしていますか？ あなたのヒントをお寄せいただきありがとうございます！

Answer 1

ハハハ！あなたは非常に微妙な（しかし非常に一般的な）エラーがあります。

はここを参照してください：あなたが密接に見ればバグは、だ

arCol = obRow.cols; 

。

これは取得できましたか？それとも、私はそれを台無しにしたいですか？

エラーは次のとおりです。Javascriptでは、変数をローカルとして宣言しないと、デフォルトでグローバルになります。 arColは再帰呼び出しでリセットされます！

すべての変数の宣言は、明示的であるべきである。

var arCol = obRow.cols; 

その他のヒント：

• xとyは（ "x軸" に関する空間情報を示すために使用されるべきですおよび「y軸」）。配列インデックスにはiとj（必要に応じてk）を使用します。それらを地元として宣言します。
• do なしはグローバル可変値を使用します。この例ではです。代わりに関数に文字列を返します。
• グローバル変数と仮パラメータ（この場合はgridArray）またはローカル変数に同じ名前を使用しないでください。コンピュータは混乱することはありませんが、あなたはそうなります。
• 特別な理由なしに変数名に型名（ "array"）を入れないでください。あなただけ

正当な理由なしに一度​​、それを使用しようとしている場合

は簡単な式に変数を入れないように修正されたコードは

function createHtmlCode(grid,level){ 
    var r = ""; 
    for(var i=0; i<grid.length; i++){ 
    r+="<div class='row'>"; 
    var arCol = grid[i].cols; 
    for(var j=0; j<arCol.length; j++){ 
     r+="<div class='col'>"; 
     var rows = arCol[j].rows; 
     if(rows){ 
     r += createHtmlCode(rows,level++); 
     } 
     r+="</div>"; 
    } 
    r+="</div>"; 
    } 
    return r; 
} 

console.log(createHtmlCode(myGrid,1));