CODEWITHSUNDEEP
laravelvue.js
mamaye
mamaye

Reputation: 1054

Output values from nested Api/Laravel Collection response in vuejs

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"
                }
            }
        }
    ]
}

Upvotes: 0

Views: 307

Answers (3)

Daniel Mesa
Daniel Mesa

Reputation: 586

<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>

Upvotes: 0

Ayrton
Ayrton

Reputation: 2303

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.

Upvotes: 0

Hamilton Gabriel
Hamilton Gabriel

Reputation: 367

<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>

Upvotes: 1

Related Questions