Javascript 获取对象或数组的深度

Javascript 获取对象或数组的深度,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我得到了类似这样的数据,并说我得到了无穷大的群的深度 data/group.data.json module.exports = [ { id: '1', title: 'Awesome Group', type: '1', groups: [ { id: '5', title: 'Child in Level Two - A', type: '2', groups: [

我得到了类似这样的数据,并说我得到了无穷大的群的深度

data/group.data.json

module.exports = [
  {
    id: '1',
    title: 'Awesome Group',
    type: '1',
    groups: [
      {
        id: '5',
        title: 'Child in Level Two - A',
        type: '2',
        groups: [
          {
            id: '6',
            title: 'Child in Level Three - A',
            type: '2',
          },
          {
            id: '8',
            title: 'Child in Level Three - B',
            type: '2',
          }
        ]
      },
      {
        id: '7',
        title: 'Child in Level Two - B',
        type: '2',
      }
    ]
  },
  {
    id: '2',
    title: 'Rockers',
    type: '2',
  },
  {
    id: '3',
    title: 'Dazzlers',
    type: '3',
  }
];
我无法像下面那样手动完成这项工作,如何动态地迭代到最后

<ul class="list-group list-group-flush">
  <template v-for="group in groupData">
    <a class="list-group-item" href="#">
      <h6>{{group.title}}</h6>
    </a>
    <template v-for="group in group.groups">
      <a class="list-group-item pl-40" href="#">
        <h6>{{group.title}}</h6>
      </a>
      <template v-for="group in group.groups">
        <a class="list-group-item pl-60" href="#">
          <h6>{{group.title}}</h6>
        </a>
      </template>
    </template>
  </template>
</ul>

<script>
  let groupData = require('../data/group.data');

  export default {
    data () {
      return {
        groupData,
      }
    }
  }
</script>
让groupData=require('../data/group.data'); 导出默认值{ 数据(){ 返回{ 分组数据, } } }

有一个答案有点像我想要的,但不确定如何在我的例子中使用:

一个解决方案就是在其模板中引用组件本身。只要没有太多的元素,它应该是完美的。与此功能相关的唯一限制是为组件指定名称。当您全局注册组件时,这将自动完成。否则,只需在组件对象中指定属性名称

有关更完整的解释,请参阅

此外,还必须指定要在模板中的组件上循环的属性

最后,这里是您的工作示例:

const tree=[{id:“1”,title:“Awesome Group”,type:“1”,groups:[{id:“5”,title:“二级儿童-A”,type:“2”,title:“三级儿童-A”,type:“2”},{id:“8”,title:“三级儿童-B”,type:“2”},{id:“二级儿童-B”,type:“2”},{id:“2”,title:“摇滚者”,type:“2”},{id:“3”,title:“炫目者”,type:“3”};
Vue.组件('组'{
名称:'组',
模板:`
`,
道具:['value','deep']
});
新Vue({
el:“#应用程序”,
数据:{
树
}
});


我认为使用N维数组是不太实际的,其中N>3。您应该尝试重新构造数据结构。您应该研究如何编写递归组件: