Javascript 如何通过构建div'；分项清单

我有一个正在构建的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": [{...}]

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

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

所以你会看到“体育”和“音乐家”，如果你点击体育，它会从项目中创建新的div，所以你现在会看到“专业”和“业余”。单击其中一个，您将看到子项，依此类推

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

我编写了一些松散的代码，如下所示：

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": [{...}]

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

我可以通过如下功能处理第一级点击：

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": [{...}]

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

---

但显然，硬编码深度并不理想。有什么好的方法来导航这种数据布局吗

如果您在“方法中使用”来导航对象，这很好

let k;
for (k in obj) {

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

您可以创建嵌套“for”来生成元素，并在循环中的元素上放置事件