Get the depth of an object or array

Question

I get data something like this and say that I get depth of groups to infinity.

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',
  }
];

I cannot do this manually like below, How to iterate it till the end dynamically?

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

There is one answer kinda what I want, but not sure how to use in my case: https://stackoverflow.com/a/13523953/1292050

i believe it is not very practical to use of N-Dimensional array, where N>3. You should try to restructure your data — Duy Anh, Jun 22 '17 at 06:49
You should look into how to write recursive components: https://vuejs.org/v2/examples/tree-view.html — Elfayer, Jun 22 '17 at 06:49

score 1 · Accepted Answer · edited Jul 16 '22 at 01:59

One solution is simply to refer the component itself in its template. It should be perfectly fine as long as there is not too much elements. The only limitation relative to this functionality is to assign a name to the component. When you register the component globally, this is automatically done. When you don't, just specify a property name into the component object.

See the doc for a more complete explanation.

Also, you must specify a key property to loop over components in templates.

Finally, here is your working example:

const tree = [{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"}];

Vue.component('Group', {
  name: 'Group',
  template: `<div>
    <a class="list-group-item" href="#">
      <h6>
        <template v-for="d in deep">-</template>
        {{ value.title }}
     </h6>
    </a>
    <group v-for="g in value.groups" 
      :value="g" 
      :deep="deep + 1" 
      :key="g.id">
    </group>
  </div>`,
  props: ['value', 'deep']
});

new Vue({
  el: '#app',
  data: {
    tree
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <group v-for="t in tree" 
    :value="t" 
    :deep="1" 
    :key="t.id">
  </group>
</div>

Get the depth of an object or array

1 Answers1