ネストされたHTML（木）JS

Question

私はこの

{ 
    desc: "text", 
    nodes: [{ 
     desc: "text1", 
     nodes: [ 
      {desc: "text3"}, 
      {desc: "text4"} 
     ]}, 
     {desc: "text2", 
     nodes: [ 
      {desc: "text5"} 
     ]} 
    ] 
} 

のようなJSONを持っていると私の問題のようなネストされたHTMLオブジェクトを作成することです：私は

function buildTree(tree) { 
    let node = tree; 
    var el = document.createElement('div'); 

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

} 
buildTree(json_obj); 

をしようとしていた

<div> 
    text 
    <div> text1 
     <div> text3 </div> 
     <div> text4 </div> 
    </div> 

    <div> text2 
     <div> text5 </div> 
    </div> 
</div> 

を

これはプレーンテキストにすることができます（解析するのは簡単ですが）。この問題を扱うことはできません。再帰を試みましたが、すべて破損しています。/

敬具

Answer 1

は何が欠けているのは、あなたがDOMに生成されたelを追加していないので、それがすべて作成されますが、追加しないことです。あなたが望むものを達成するために.appendChild(node)を使用します。

function buildTree(tree) { 
    let node = tree; 
    var el = document.createElement('div'); 

    el.innerHTML = node.desc; 

    if (node.nodes) { 
    node.nodes.forEach(function(n) { 
     el.appendChild(buildTree(n)); 
    }); 
    } 

    return el; 
} 
var tree = buildTree(data); 
document.querySelector('body').appendChild(tree); 

は、プルーフ・オブ・コンセプトは、以下を参照してください：

var data = { 
 
    desc: "text", 
 
    nodes: [{ 
 
     desc: "text1", 
 
     nodes: [{ 
 
      desc: "text3" 
 
     }, 
 
     { 
 
      desc: "text4" 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     desc: "text2", 
 
     nodes: [{ 
 
     desc: "text5" 
 
     }] 
 
    } 
 
    ] 
 
}; 
 

 
function buildTree(tree) { 
 
    let node = tree; 
 
    var el = document.createElement('div'); 
 
    
 
    el.innerHTML = node.desc; 
 
    
 
    if (node.nodes) { 
 
    node.nodes.forEach(function(n) { 
 
     el.appendChild(buildTree(n)); 
 
    }); 
 
    } 
 

 
    return el; 
 
} 
 
var tree = buildTree(data); 
 
document.querySelector('body').appendChild(tree);

div { 
 
    padding-left: 10px; 
 
}