Question

我有以下HTML：

<section class="tree"></section>

相对简单......现在，我有以下JSON对象：

var input = {
    label: 'Earth',
    type: 'planet',
    children: [{
        label: 'Australia',
        type: 'country',
        children: [{
            label: 'Sydney',
            type: 'city',
            children: [{
                label: 'Office One',
                type: 'office',
                children: []
            }]
        }]
    }, {
        label: 'USA',
        type: 'country',
        children: [{
            label: 'Phoenix',
            type: 'city',
            children: [{
                label: 'Office Two',
                type: 'office',
                children: []
            }]
        }, {
            label: 'New York',
            type: 'city',
            children: [{
                label: 'Office Three',
                type: 'office',
                children: []
            }]
        }]
    }]
};

我正在尝试创建一个简单的DIV列表，其中包含一个节点号（随着我们遇到的每个新节点而增加）以及它的父节点。

到目前为止，我已经设法让节点解决了......但是父节点似乎总是引用节点的值减一而不是相应父节点的节点......

结果我的列表看起来像这样：

<section class="tree">
  <div class="node lvl0" node="1" parent="0">Earth</div>
  <div class="node lvl1" node="2" parent="1">Australia</div>
  <div class="node lvl2" node="3" parent="2">Sydney</div>
  <div class="node lvl3" node="4" parent="3">Office One</div>
  <div class="node lvl1" node="5" parent="4">USA</div>
  <div class="node lvl2" node="6" parent="5">Phoenix</div>
  <div class="node lvl3" node="7" parent="6">Office Two</div>
  <div class="node lvl2" node="8" parent="7">New York</div>
  <div class="node lvl3" node="9" parent="8">Office Three</div>
</section>

而不是：

<section class="tree">
  <div class="node lvl0" node="1" parent="0">Earth</div>
  <div class="node lvl1" node="2" parent="1">Australia</div>
  <div class="node lvl2" node="3" parent="2">Sydney</div>
  <div class="node lvl3" node="4" parent="3">Office One</div>
  <div class="node lvl1" node="5" parent="1">USA</div>
  <div class="node lvl2" node="6" parent="5">Phoenix</div>
  <div class="node lvl3" node="7" parent="6">Office Two</div>
  <div class="node lvl2" node="8" parent="5">New York</div>
  <div class="node lvl3" node="9" parent="8">Office Three</div>
</section>

这是我的代码：

nodeCnt = 0;
var dispTree = function(tree,lvl=0,idx=0,prt=0) {
idx++;
$(".tree").append("<div class='node lvl"+lvl+"' node='"+(++nodeCnt)+"' parent='"+prt+"'>"+tree.label+"</div>");
parent = nodeCnt;
for (var i = 0; i < tree.children.length; i++){


         dispTree(tree.children[i], lvl+1, idx, parent);
    }
};

dispTree(input)

有人可以告诉我这段代码我可能做错了什么，以及如何纠正它？

我在JSFiddle上有这个：http://jsfiddle.net/eliseo_d/cn3s7apz/1/

Answer 1

你可以像这样使用递归。

var input = {"label":"Earth","type":"planet","children":[{"label":"Australia","type":"country","children":[{"label":"Sydney","type":"city","children":[{"label":"Office One","type":"office","children":[]}]}]},{"label":"USA","type":"country","children":[{"label":"Phoenix","type":"city","children":[{"label":"Office Two","type":"office","children":[]}]},{"label":"New York","type":"city","children":[{"label":"Office Three","type":"office","children":[]}]}]}]}


let node = 1;
var result = []

function tree(lvl, parent = 0, node, data) {
  let div = `<div class="node lvl${lvl}" node="${node}" parent="${parent==0 ? 0 : parent - 1}">${data.label}</div>`;
  n = node += 1
  if (data.children.length) {
    data.children.forEach(e => tree(lvl + 1, node, n, e))
  }

  result.push($(div))
}

tree(0, 0, node, input)

$('body').append(...result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何使用节点和父数据值设置基于JSON的树

1 个答案: