Vue.js - show details of nested array inside another array

Question

i want to show my relationship values inside my result array. my results looks like this.

 "counciler": [
        {
            "id": 1,
            "name": "family",
            "description": "test description here",
            "created_at": "2020-04-16T07:57:31.000000Z",
            "updated_at": "2020-04-16T07:57:31.000000Z",
            "deleted_at": null,
            "users": [
                {
                    "id": 8,
                    "name": "stack change",
                    "email": "[email protected]",
                    "phone": "000000000",
                    "profile_image": null,
                    "address": null,
                    "user_type": "counciler",
                    "email_verified_at": null,
                    "created_at": "2020-04-16T13:32:51.000000Z",
                    "updated_at": "2020-04-16T13:32:51.000000Z",
                    "deleted_at": null,
                    "pivot": {
                        "category_id": 1,
                        "user_id": 8
                    }
                }                
            ]
        }
    ]

my question is i want to get my users array details into a v-for for list all my users in that category. how can i achieve this one?

i also tried this one but not working

<div v-for="user in counciler.users" :key="user.id"></div>

counciler is an array, so you will have to v-for over it before looping over the users — Taplar
– Taplar, Commented Apr 16, 2020 at 20:21

Boussadjra Brahim · Accepted Answer · 2020-04-16 20:22:23Z

3

First you should iterate over the counciler array and then loop through the users items :

<template v-for="counc in counciler"
    <div v-for="user in counc.users" :key="user.id"></div>

</template>

answered Apr 16, 2020 at 20:22

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

Boussadjra Brahim Over a year ago

You're welcome, the <template> that i used is not the root element

Tom Nijs · Accepted Answer · 2020-04-16 20:21:32Z

2

You try to access the object counciler.users but this doesn't exist because counciler is an array, not an object. Either you need to loop over counciler then other the users. Or just select the first object like so: counciler[0].users

answered Apr 16, 2020 at 20:21

Tom Nijs

1357 bronze badges

Collectives™ on Stack Overflow

Vue.js - show details of nested array inside another array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related