Group Array with ID and ParentId with vuejs / vuex

Question

I have an object like this:

[

{"id":1,"parentId":null,"name":"Parent1"},

{"id":2,"parentId":null,"name":"Parent2"},

{"id":3,"parentId":null,"name":"Parent3"},

{"id":4,"parentId":1,"name":"Child1Parent1"},

{"id":5,"parentId":1,"name":"Child2Parent1"},

{"id":6,"parentId":2,"name":"Child1Parent2"},

{"id":7,"parentId":null,"name":"Parent4"}

... ]

I have to return grouped Array by Id and ParentId in table with expanded childs if exist like:

[

{

"id":1,"parentId":null,"name":"Parent1",

{"id":4,"parentId":1,"name":"Child1Parent1"},

{"id":5,"parentId":1,"name":"Child2Parent1"}

},

{

"id":2,"parentId":null,"name":"Parent2",

{"id":6,"parentId":2,"name":"Child1Parent2"}

},

{"id":3,"parentId":null,"name":"Parent3"},

... ]

You can only ask one question at a time. You can't use a question as an online tutorial getting you through building a website. That is to say we're only answering as long as you make your questions generic (useful for future visitors with a similar issue). If you keep changing one question based on where you are in your quest to build a website, that's only going to be useful to you, therefore off-topic on Stack Overflow. — tao
– tao, Commented May 11, 2020 at 17:01

tao · Accepted Answer · 2020-05-11 11:24:56Z

I took the liberty to take @procoib's answer a bit further and I added a few more details to to it, allowing the markup to be more expressive:

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  data: () => ({
    items: [
      { "id": 1, "parentId": null, "name": "Parent1" },
      { "id": 2, "parentId": null, "name": "Parent2" },
      { "id": 3, "parentId": null, "name": "Parent3" },
      { "id": 4, "parentId": 1, "name": "Child1Parent1" },
      { "id": 5, "parentId": 1, "name": "Child2Parent1" },
      { "id": 6, "parentId": 2, "name": "Child1Parent2" },
      { "id": 7, "parentId": null, "name": "Parent4" }
    ].map(i => ({ ...i,
      expanded: true
    }))
  }),
  computed: {
    parents() {
      return this.items.filter(g => !g.parentId)
    },
    children() {
      return this.items.filter(g => g.parentId)
    }
  },
  methods: {
    childrenOf(id) {
      return this.items.filter(g => g.parentId === id)
    }
  }
})

.cursor-pointer {
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<div id="app">
  <table class="table table-sm">
    <thead>
      <tr>
        <th>ID</th>
        <th>parentId</th>
        <th>name</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="parent in parents">
          <tr>
            <th colspan="3"
                class="bg-light">
                {{parent.name}}
                <code v-if="childrenOf(parent.id).length"
                      class="font-weight-light cursor-pointer"
                      @click="parent.expanded = !parent.expanded">[{{
                        parent.expanded ? 'hide' : 'show'
                      }}]</code>
            </th>
          </tr>
          <tr v-for="child in childrenOf(parent.id)" v-show="parent.expanded">
            <td v-text="child.id" />
            <td v-text="child.parentId"/>
            <td v-text="child.name"/>
          </tr>
        </template>
    </tbody>
  </table>
</div>

Please explain how that is part of current question. You must have skipped reading How to Ask.

procoib · Accepted Answer · 2020-05-11 08:50:29Z

1

From what i can understand from your list of objects, you want to link your child keys to parents. And display those to the template via a loop?

I would say the easiest thing to do with that data:

Create a template within the table tags to loop through every array using v-for, label this as parent.
Use a v-if against parentId to check and determine which object is a parent
Inside of this loop, create another row and loop through the children
Check against parentId to confirm its a child, then compare the child.parentId to parent.id

new Vue({
  el: "#app",
  data: {
   taskArray: [
    {"id":1,"parentId":null,"name":"Parent1"},
    {"id":2,"parentId":null,"name":"Parent2"},
    {"id":3,"parentId":null,"name":"Parent3"},
    {"id":4,"parentId":1,"name":"Child1Parent1"},
    {"id":5,"parentId":1,"name":"Child2Parent1"},
    {"id":6,"parentId":2,"name":"Child1Parent2"},
    {"id":7,"parentId":null,"name":"Parent4"}
 ]
  }
})

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Grouped array</h2>

  <table id="customers">
    <template v-for="parent in taskArray">
      <tr v-if="!parent.parentId">
        <td><b>{{ parent.name }}</b></td>
      </tr>
      <tr v-for="child in taskArray">
        <td v-if="child.parentId === parent.id" style="border:0px;background-color:#f2f2f2"> {{ child.name }}</td>
      </tr>
    </template>
  </table>
</div>

Jsfiddle for reference: https://jsfiddle.net/procoib/vcopwtk8/

answered May 11, 2020 at 8:50

procoib

4871 gold badge4 silver badges12 bronze badges

2 Comments

tao Over a year ago

Very good use of <template> tags and, indeed, I stand corrected, there's no actual need for grouping.

procoib Over a year ago

@kierusek Did any of these answers solve your original question?

Collectives™ on Stack Overflow

Group Array with ID and ParentId with vuejs / vuex

"id":1,"parentId":null,"name":"Parent1",

"id":2,"parentId":null,"name":"Parent2",

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

"id":1,"parentId":null,"name":"Parent1",

"id":2,"parentId":null,"name":"Parent2",

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related