来自json(tree)JS的嵌套html

时间:2017-09-08 14:16:33

标签: javascript jquery html json

我有这样的json

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

我的问题是创建嵌套的html对象,如:

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

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

我在尝试

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);

它可以是纯文本,(它很容易解析)但我无法处理这个问题,我正在尝试递归,但它都破坏了:/

祝你好运

1 个答案:

答案 0 :(得分:0)

您缺少的是您没有将生成的el附加到DOM,因此它已全部创建但从未附加。使用.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);

见下面的概念验证:

&#13;
&#13;
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);
&#13;
div {
  padding-left: 10px;
}
&#13;
&#13;
&#13;