Display data from an Api in a v-data-table, an object within an object vue js, vuetify

Question

I have the following Json coming from an api, which I want to present in a V-DATA-TABLE:

[
    {
        "id": 1,
        "firstName": "Ana",
        "lastName": "Lucia",
        "phone": "(11)99989-8989",
        "mobilePhone": "(11)99989-8989",
        "email": "[email protected]",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "inativo"
        },
        "services": [
            {
                "name": "progressiva"
            },
            {
                "name": "Manicure"
            }
        ]
    },
    {
        "id": 2,
        "firstName": "Maria",
        "lastName": "Luiza",
        "phone": "(12)32333-3333",
        "mobilePhone": "(43)45555-5555",
        "email": "[email protected]",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "pendente"
        },
        "services": [
            {
                "name": "progressiva"
            }
        ]
    },
    {
        "id": 3,
        "firstName": "Mario",
        "lastName": "Braz",
        "phone": "(11)23232-3222",
        "mobilePhone": "(11)23232-3222",
        "email": "[email protected]",
        "gender": {
            "name": "masculino"
        },
        "status": {
            "name": "ativo"
        },
        "services": [
            {
                "name": "progressiva"
            }
        ]
    }
]

However in the Data table the field that the Services would come from, is empty as shown in the image:

Here is the code of my .Vue data:

data: () => ({
      dialog: false,
      pageTitle: 'Employees',
      headers: [
        {
          text: 'First Name',
          align: 'start',
          sortable: false,
          value: 'firstName',
        },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' },
        { text: 'Mobile Phone', value: 'mobilePhone' },
        { text: 'Gender', value: 'gender.name' },
        { text: 'Status', value: 'status.name' },
        { text: 'Services', value: 'services.name' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      search: '',
      employees: [],
      genders: [],
      status: [],
      services:[],
      editedIndex: -1,
      editedItem: {},
      defaultItem: {},
    }),

I noticed that when I change this code snippet and leave only 'services':

{ text: 'Services', value: 'services' },

exactly the number of objects that are the services appears but not the names:

Here is the method I used to pull the main object that is the 'employees' and all their relationships:

methods: {
      initialize () {
        axios.get('http://192.168.26.130:3000/employees/').then(response => {
          this.employees = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/genders/').then(response => {
          this.genders = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/employee-status').then(response => {
          this.status = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/services').then(response => {
          this.services = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });

      },

tao · Accepted Answer · 2020-05-17 03:18:19Z

1

{ text: 'Services', value: 'services.map(s => s.name).join(", ") }

will display the services names, separated by ', ' (comma + space).

Alternative method, using template:

<template v-slot:item.services="{ item }">
  {{ item.services.map(s => s.name).join(', ') }}
</template>

answered May 17, 2020 at 3:18

tao

91.1k18 gold badges136 silver badges174 bronze badges

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

Comments

Hans Felix Ramos · Accepted Answer · 2020-05-17 03:14:33Z

0

services prop is an array:

 "services": [
        {
            "name": "progressiva"
        },
        {
            "name": "Manicure"
        }
 ]

If you want to display the first value, write:

{ text: 'Services', value: 'services[0].name' },

Otherwhise, you need to transform the array.

answered May 17, 2020 at 3:14

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Collectives™ on Stack Overflow

Display data from an Api in a v-data-table, an object within an object vue js, vuetify

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related