入れ子になったjsonをhtmlに変換する

Question

私はjsonオブジェクトを取るという仕事を与えられています（それはこれ以上は入れ子になっていないかもしれません）、それを解析して追加する関数を書いていますHTMLページ。具体的には、私はデータを取得する必要があるようなファイルを私に渡します。深さは1レベル、深さは15レベルです。私はどこから始めるべきか分かりません。私は再帰的なループをwhileループで使うべきだと知っていますが、完全に消えてしまっています。

正しい方向のヘルプやポインタがあれば助かります。ありがとうございます。

[ 
    { 
    "tag": "section", 
    "content": { 
     "tag": "h2", 
     "content": "Welcome to My Page!" 
    } 
    }, 
    { 
    "tag": "section", 
    "content": [ 
     { 
     "tag": "h3", 
     "content": "My Favorite Things" 
     }, 
     { 
     "tag": "ul", 
     "content": [ 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/200/200'/>" 
      }, 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/201/200'/>" 
      }, 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/200/201'/>" 
      } 
     ] 
     }, 
     { 
     "tag": "p", 
     "content": [ 
      { 
      "tag": "span", 
      "content": "In short, I " 
      }, 
      { 
      "tag": "strong", 
      "content": "just love" 
      }, 
      { 
      "tag": "span", 
      "content": " kittens!" 
      } 
     ] 
     } 
    ] 
    } 
] 

Answer 1

これはテンプレートフレームワークの仕事のようです。そこには多くのものがあり、ユーザーは値を編集できる必要があり、データを表示する必要がある場合（片方向バインディング）にはいくつかの点が優れています（使いやすい）場合もあります。

個人的には、アンギュラ（Angular1またはAngular2）のようなフレームワークを使用しています。これは、完全なフレームワークであり、多くのものを手伝ってくれるからです。それは両方とも、特にあなたがそれらに精通していなくて、jsonからいくつかのhtmlを作成する必要がある場合は、残酷かもしれないと言いました。

より簡単な解決策は、MustacheまたはHandlebarsのようなテンプレートシステムを使用することです。両方とも素晴らしいテンプレートシステムです。後者はもう一方の上に構築されます。

幸運 - 恐れるよりも楽しく、やや楽になるだろうと確信しています。あなたは再帰を述べたので、はいそれを使用しますが、フレームワークはあなたのためにそれをやらせる - レストラブルやエラーが発生しにくいが:)

Answer 2

あなたがelement.appendChild(otherelement);を使用することができるよりも （var element = document.createElement(currentLevel.tag);）あなたの記憶で要素を作成するためにdocument.createElement("tag");関数を使用それの中に何かを入れる。 typeof currentLevel.contentが "オブジェクト"か "文字列"かどうかをチェックすることで、 "コンテンツ"の種類（文字列または配列）を確認できます。

それを書いてきたら、あなたが望む要素を得るだけでなく、targetElement.appendChild(element);の中に書いてください。 あなたはしかし var HTMLcode = element.outerHTML;

Answer 3

よりも、単にHTMLコードをしたい場合はここにある：https://jsfiddle.net/ej4ftzcs/

// A recursive function to build DOM tree from a json structure 
function buildTree(tree, container) { 
    tree.forEach(function(node) { 

    var el = document.createElement(node.tag); 

    if (Array.isArray(node.content)) { 
     buildTree(node.content, el); 
    } 
    else if (typeof(node.content) == 'object') { 
     buildTree([node.content], el); 
    } 
    else { 
     el.innerHTML = node.content; 
    } 

    container.appendChild(el); 
    }); 
} 

// Run !!! 
buildTree(tree, document.body);