javascript - 如何通过构建 div 的子项来导航 JSON 层次结构

Question

我有一个正在构建的 JSON 对象（所以如果有意义的话，我可以重新构建）。它看起来像这样：

let topics = {
  "topic" : [{
    name: "Sports",
    id: 1,
    items : [{
      name: "Amateur",
      parent: "Sports",
      items: [
        { id: 1, name: "NHL"},
        { id: 7, name: "Winter Olympics"}
      ],
      },
      {
      parent: "Sports",
      name: "Pro",
      items: [
        { id: 2, name: "IIHF"},
        { id: 3, name: "Timbit Hockey"}
      ],
  },
  "name": "Musicians",
  "id": 2,
  "items": [{...}]

我正在尝试构建将在 div 中显示级别 1 项目的东西，当其中一个项目被点击时，它将显示它的子项目，如果这些子项目有“项目”，它们可以被点击on 以显示下一个级别。

所以你会看到“Sports”和“Musicians”，如果你点击 Sports，它会从 Items 中创建新的 div，所以你现在会看到“Pro”和“Amateur”。单击其中一个，您会看到子项目等。

最终我想让它成为一个滑动式导航，但为了概念验证，我只需要点击就可以了。

我整理了一些像这样的松散代码：

let makeNav = (obj) => {
  let newDiv = document.createElement('div')
  newDiv.innerText = obj.name
  newDiv.dataset.id = obj.id
  newDiv.dataset.name = obj.name
  selector.appendChild(newDiv)
}

我可以使用如下函数处理第一级点击：

let processNode = (filterId, parent = null) => {
  console.log('Called processNode with filter', filterId, parent)
  let currentNode = passionPoints.Passion.filter( o => o.name === filterId)
  currentNode[0].items.forEach(item => {
    makeNav(item)
  })
}

但显然对深度进行硬编码并不理想。导航这种数据布局的任何好方法？

标签： javascriptjson

Answer 1

如果您使用“in”方法来导航对象，那就太好了

let k;
for (k in obj) {

    /*        k : key
     *   obj[k] : value
     */
}

您可以创建嵌套“for”来制作元素并将事件放在循环中的元素上。