Output values from nested Api/Laravel Collection response in vuejs

Question

I'm trying to output values from an axios promise to my vue component. So far I'm still getting an error [Vue warn]: Error in render: "TypeError: Cannot read property 'surname' of null". Below is what my code looks like

<template> 
  <div> 
     {{user.surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data.data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

This is the actual data returned from the api

{
    "data": [
        {
            "data": {
                "id": 11,
                "surname": "Hand",
                "first_name": "Westley",
                "other_name": "Collier",
                "email": "[email protected]",
                "phone_number": "306-755-6192 x493",
                "birthday": "06/21/1991",
                "company_id": 3,
                "department_id": 6,
                "job_id": 1,
                "state_id": 11,
                "marital_status": "married",
                "gender_id": 2,
                "photo": null,
                "is_admin": 0,
                "date_of_employment": null,
                "job": {
                    "id": 1,
                    "title": "HR Manager",
                    "comment": null,
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                },
                "department": {
                    "id": 6,
                    "name": "Technical",
                    "created_at": "2019-10-30 17:38:43",
                    "updated_at": "2019-10-30 17:38:43"
                },
                "gender": {
                    "id": 2,
                    "name": "Female",
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                },
                "company": {
                    "id": 3,
                    "name": "Cometshipping",
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                },
                "employmentstatus": {
                    "id": 1,
                    "name": "Full Time Permanent",
                    "comment": null,
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                }
            }
        }
    ]
}

Which error are you getting? You should add a catch to your promise to see any errors — Ayrton
– Ayrton, Commented Oct 31, 2019 at 12:30
[Vue warn]: Error in render: "TypeError: Cannot read property 'surname' of null" — mamaye
– mamaye, Commented Oct 31, 2019 at 12:32
you need to initialise your user object in data, with said properties you are using, as its already null, you need to make user an object and then initialise rest of the values: user: { surname: '' } before mounted hook it created the component and uses the data, which is still null and mounted calls after render the component. — Farrukh Ayyaz
– Farrukh Ayyaz, Commented Oct 31, 2019 at 12:55

Hamilton Gabriel · Accepted Answer · 2019-10-31 12:37:38Z

1

<template> 
  <div> 
     {{surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   computed: {
    surname () {
     if (this.user) {
      return this.user.surname
     }
    }

   }

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data[0].data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

answered Oct 31, 2019 at 12:37

Hamilton Gabriel

3651 silver badge6 bronze badges

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

Comments

Ayrton · Accepted Answer · 2019-10-31 13:04:41Z

0

Your user variable will initially be null, and you can't get properties from a null value. Therefore, you should replace {{ user.surname }} With {{ user ? user.surname : '' }}.

Another issue is that the data property from your response is an array, not an object, so in your mounted hook you can't do this.user = response.data.data. Instead, you should do this.user = response.data[0].data.

That way, while your user isn't fetched you'll display an empty text instead of getting an error.

Also, I suggest you add a catch hook to your promise to tend to any possible errors.

edited Oct 31, 2019 at 13:04

answered Oct 31, 2019 at 12:32

Ayrton

2,3131 gold badge16 silver badges25 bronze badges

5 Comments

mamaye Over a year ago

it's just blank @Ayrton, not sure if there is an error on my catch hook

Ayrton Over a year ago

@codervine try what I added on the edit, second paragraph

mamaye Over a year ago

I have done this response.data.data[0] then on my template, { {user.data.surname }} displays but I still have this error Error in render: "TypeError: Cannot read property 'data' of null"

Ayrton Over a year ago

@codervine no, just go to your mounted hook and replace this.user = response.data.data with this.user = response.data[0].data.

mamaye Over a year ago

this.user = response.data.data[0].data; is what is working very perfectly Thanks... you can update your answer

Daniel Mesa · Accepted Answer · 2019-10-31 13:35:38Z

0

<template> 
  <div> 
      {{ user.surname }}
  </div>
</template>

<script>
    export default {
    name: 'EmployeeCard',

    data(){
        return{
            user: {}
        }
    },

    methods:{
        getUser(){
            axios.get('/api/users/'+ this.$route.params.id)
        .then ( {data} => {
                this.user = data[0].data; 
         })
        }
    },

    mounted(){
        this.getUser();
    }
}
</script>

answered Oct 31, 2019 at 13:35

Daniel Mesa

5965 silver badges14 bronze badges

1 Comment

Ofer Sadan Over a year ago

Please edit this answer to include a bit of explanation of why whis solves the problem in question

Collectives™ on Stack Overflow

Output values from nested Api/Laravel Collection response in vuejs

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related