Displaying grouped nested arrays using Vue JS

Question

I am trying to group and display a list of names under teams from an ajax call using Vue JS.

Here is the original object:

0 {  name: Bob Sinclair
 teamname: Francs
 email: [email protected]
 job: Product Manager
 type: Team Member
  }
1 {  name: Neil Jones
 teamname: Dream Team
 email: [email protected]
 job: Developer
 type: Team Member
  }
2 {  name: Jim Cairns
 teamname: Dream Team
 email: [email protected]
 job: Developer
 type: Team Member
  }

I have grouped the data by "teamname" using the following function:

                function groupBy(collection, property) {
                var i = 0, val, index,
                    values = [], result = [];
                for (; i < collection.length; i++) {
                    val = collection[i][property];
                    index = values.indexOf(val);
                    if (index > -1)
                        result[index].push(collection[i]);
                    else {
                        values.push(val);
                        result.push([collection[i]]);
                    }
                }
                return result;
            }

This gives me the following output in the console:

0 { 0 { name: Bob Sinclair
        teamname: Francs
        email: [email protected]
        job: Product Manager
        type: Team Member
      }
1 { 0 { name: Neil Jones
        teamname: Dream Team
        email: [email protected]
        job: Developer
        type: Team Member
      }
    1 { name: Jim Cairns
        teamname: Dream Team
        email: [email protected]
        job: Developer
        type: Team Member
      }

My issue is getting this to display using "v-for". I want to be able to have a card for each "teamname" with a list of "names" underneath.

Thanks in advance!

iiirxs · Accepted Answer · 2018-08-14 15:14:19Z

1

Let's say that your grouped data are called teams:

Then your template code should be:

<div class="team" v-for="team in teams" :key="team[0].teamname">
    <p> {{ team[0].teamname }} </p>
    <div class="teammates" v-for="teammate in team" :key="teammate.name">
        {{ teammate.name }}
        // other infos for teammate
    </div>
</div>

answered Aug 14, 2018 at 15:14

iiirxs

4,6022 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stu Rodger Over a year ago

Amazing!! and so simple. Could not get my head around this at all. Thank you very much!

Collectives™ on Stack Overflow

Displaying grouped nested arrays using Vue JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related