javascript - 使用 Javascript 或 Jquery 从 JSON 数据动态显示数据

Question

如何使用 jQuery 或 Javascript 在三个单独的 div 元素中显示 JSON 数据（父-子-孙）？

根据我当前的代码，这不仅是动态的，仅在单独的 div 中显示 JSON 数据，而且在正确的 div 中显示所有子项（它还显示曾孙）

如果用户点击一个grandchild标签（如果它有一个孩子），那么grandchild标签应该出现在中间的 div 中，他们的孩子（曾孙）应该显示在右边的 div 中。

我想让所有标签动态化，以便当用户单击任何标签时，标签显示在中间 div 中，其子项显示在右侧 div 中。

var data = [{
    "id": 1,
    "parent": 0,
    "name": "Parent"
  },
  {
    "id": 2,
    "parent": 1,
    "name": "Child"
  },
  {
    "id": 3,
    "parent": 1,
    "name": "Child"
  },
  {
    "id": 4,
    "parent": 2,
    "name": "GrandChild"
  },
  {
    "id": 5,
    "parent": 2,
    "name": "GrandChild"
  },
  {
    "id": 6,
    "parent": 3,
    "name": "GrandChild"
  },
  {
    "id": 7,
    "parent": 3,
    "name": "GrandChild"
  },
  {
    "id": 8,
    "parent": 5,
    "name": "Great-GrandChild"
  },
  {
    "id": 9,
    "parent": 5,
    "name": "Great-GrandChild"
  },
  {
    "id": 10,
    "parent": 6,
    "name": "Great-GrandChild"
  },
  {
    "id": 11,
    "parent": 7,
    "name": "Great-GrandChild"
  }
]

let getById = (id, data) => {
  let r = data.find(x => x.id === id);
  if (r == undefined) {
    return false;
  }
  return r;
}

let add = (row, data) => {
  let class_name;
  for (i = 0; i < 1; i++) {
    if (row.id == "1")
      class_name = "left_side";
    else {
      let parent = getById(row.id, data);
      if (parent.parent == "1") {
        class_name = "middle_side";
      } else {
        class_name = "right_side";
        if (getById(parent.parent, data) === false)
          return false;
      }

    }
    $("." + class_name).append(`<span id="${row.id}" class="label">${row.name}</span>`);
  }
}

$.each(data, (index, value) => {
  if (add(value, data) === false) {
    return;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-100 d-flex">
  <div class="eq_width align-self-center left_side">
    <span id="1" class="label">Parent</span>
  </div>
  <div class="vl"></div>
  <div class="eq_width align-self-center middle_side">
    <span id="2" class="label">Child</span>
    <span id="3" class="label">Child</span>
  </div>
  <div class="vl"></div>
  <div class="eq_width align-self-center right_side">
    <span id="4" class="label">GrandChild</span>
    <span id="5" class="label">GrandChild</span>
    <span id="6" class="label">GrandChild</span>
    <span id="7" class="label">GrandChild</span>
  </div>
</div>

标签： javascriptjqueryhtmljson