How to show nested array data in vuejs component

Question

I'm running the following query: $users=User::with('roles.permissions')->get()->unique();

this query returns result set:

Array = [
{
    created_at: "2019-01-11 09:27:02",
    deleted_at: null,
    email: "[email protected]",
    email_verified_at: null,
    id: 1,
    name: "ADMIN",
    roles: [
        {id: 1, name: "Admin", slug: "Admin", description: "This is Super-Admin Role", created_at: "2019-01-11 09:27:02",
      permissions: [
       {id:1, name:"Create,slug:"Create"},
       {id:1, name:"Read",slug:"Read"},
       {id:1, name:"Delete",slug:"Delete"},
],
},

    ],
},

]

returns user details with roles I want to show this result set in my Vue Component table.

this my vue component read method

  read:function(){
        axios.get('/userlist')
        .then(response=>{
            console.log(response.data);

        })

    }

This is my table

<table class="table table-bordered">
  <thead>
    <th>no.</th>
    <th>Name</th>
    <th>E-mail</th>
    <th>Roles</th>
    <th>Permissions</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr v-for="(user,key) in users">
      <td>{{++key}}</td>
     </tr>
   </tbody>
</table>

How to show user,roles and permissions separately in html table.

<table class="table table-bordered"> <thead> <th>no.</th> <th>Name</th> <th>E-mail</th> <th>Roles</th> <th>Permissions</th> <th>Action</th> </thead> <tbody> <tr v-for="(user,key) in users"> <td>{{++key}}</td> </tr> </tbody> </table> — Gabrielle-M
– Gabrielle-M, Commented Jan 15, 2019 at 16:22
Be sure to edit your post and put your code there instead of in a comment, Gabrielle. — Wild Beard
– Wild Beard, Commented Jan 15, 2019 at 16:32

Raphael Parreira · Accepted Answer · 2019-01-16 21:03:21Z

1

You should store your API result in your component data. But you need to prepare your component data to receive your users.

data() {
  return {
     users: []
  }
}

Now, you should make your function update this brand new data.

read:function(){
    axios.get('/userlist')
    .then(response=>{
        this.users = response.data;
    })

}

Now, I assume that you want to display user's roles as a concatenated string. Then, you need a function to do this.

methods: {
    getRoles: function(roles) {
        let rolesString = ''

        roles.forEach((role, index) => {
            if (index != 0)
                rolesString += ', '
            rolesString = rolesString + role.name
        })
        return rolesString
    },
    getPermissionsFromRoles: function(roles) {
        let permissionsList = []

        roles.permissions.forEach((permission) => {
            if (permissionsList.indexOf(permission.name) != -1) {
                permissionsList.push(permission.name)
            }
        })
        let permissionsString = ''
        if (permissionsList.length > 0) {
            permissionsList.forEach((permission, index) => {
                if (index != 0)
                    permissionsString += ', '
                permissionsString += permission
            })
        }
        return permissionsString
    }
}

Then, you can use this function in your template to handle your user roles.

<table class="table table-bordered">
  <thead>
    <th>no.</th>
    <th>Name</th>
    <th>E-mail</th>
    <th>Roles</th>
    <th>Permissions</th>
  </thead>
  <tbody>
    <tr v-for="(user,key) in users">
      <td>{{key}}</td>
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
      <td>{{getRoles(user.roles)}}</td>
      <td>{{getPermissionsFromRoles(user.roles)}}</td>
     </tr>
   </tbody>
</table>

edited Jan 16, 2019 at 21:03

answered Jan 15, 2019 at 16:49

Raphael Parreira

4684 silver badges14 bronze badges

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

3 Comments

Raphael Parreira Over a year ago

sorry, I forgot to get the role name. Try again, please. rolesString = rolesString + role.name

Gabrielle-M Over a year ago

<td>{{getPermissions(user.roles.permissions)}}</td> I've tried this. and write the getPermissions() as like getRoles() but it's shows TypeError.

Raphael Parreira Over a year ago

You didn't send your permission data, could you edit your post, please?

Noam Klainer · Accepted Answer · 2019-01-15 15:47:40Z

0

rendering in the template will look like:

<td v-for="role in roles">{{role}}</td>

you will also need to have roles in your data:

data() {
  return {
     roles: []
  }
}

and finally make your function update the data

function(){
   .then(response=>{
      this.roles = response.data
        })

}

answered Jan 15, 2019 at 15:47

Noam Klainer

464 bronze badges

Collectives™ on Stack Overflow

How to show nested array data in vuejs component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related