私はJSONオブジェクトの下からテーブルを生成するための最良の方法を考え出すしようとしているJSONオブジェクト

Question

から構造化されたHTMLを生成：

mytable=[ 
    {div:{ 
     nested:[ 
      {table:{ 
       nested:[ 
        {thead:{ 
         nested:[ 
          {tr:{ 
           nested:[ 
            {th:{}}, 
            {th:{}}, 
            {th:{}} 
           ]}} 
         ] 
        }}, 
        {tbody:{}} 
       ]}} 
     ]}} 
]; 

最終結果はHTML要素を生成するので、のような構造が：

<div> 
    <table> 
     <thead> 
      <tr> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

私のロジックは、しかし、私は親に子要素バックバインドを行う方法を見つけ出すことはできませんので、要素を生成し、ループし続ける場合は、オブジェクトがプロパティnestedを持っているかどうかを確認することです同時に。

Answer 1

この仕事ん：

var mytable = /* your json */ 

function toHTML(j, n) { 

    n = n || document.createDocumentFragment('div'); 
    for (var i = 0, o, l = j.length; i < l; i++) { 
     for (var tag in j[i]) { 
      o = document.createElement(tag); 
      n.appendChild(o); 
      'nested' in j[i][tag] && toHTML(j[i][tag].nested, o); 
     } 
    } 
    return n; 
} 
var res = toHTML(mytable); 

// now append it where needed 
document.body.appendChild(res);