如何在vue应用程序中的json api中循环显示名称？

Question

我有一个元素，它有 3 个级别的 childElements，所以我的元素是这样的对象：

element: {
   childElements: {
      data: Array()
   }
   name:
   id:
}

所以我的结构是这样的：

-> Element A
   -> Element B
      -> Element C
         ->Element D
            ->Element E

如您所见，有 5 个元素，但在我的元素对象中，我无法获取这 5 个级别。因此，对于每个对象，我应该进行 API 调用，并获取其详细信息。详细信息与 API 调用具有相同的结构。所以我应该用它来获取 childElements，并且 childElements.data 也包含名称和 ID。所以它应该在循环或递归中，并且由于 childElements.data 是一个数组，我应该有一个 for 循环来显示每个元素的名称。我想要一些简单的东西，在我的 vue 应用程序中，在视图中写入元素的名称。我怎样才能实现这个目标？

Answer 1

您需要使用递归模式来遍历对象，并为其子对象执行您希望对每个对象子对象执行的操作

const foo = {
  name: 'folder1',
  children: [{
    name: 'child1',
    children: [{
    name: 'gchild1'
  }]
  },{
    name: 'child12'
  }]
}

const traverseObj = obj => {
  if (typeof obj === 'object' && Object.keys(obj).length) {
    // Do your thing with obj
    console.log(obj.name)
    if (obj?.children?.length) {
      // recursively call traverse and use children obj
      obj.children.forEach(el => traverseObj(el))
    }
  }
}

traverseObj(foo)