Vuejs nested JSON data from API not displaying

Question

When getting json data from API,Im unable to access nested ppts.

My Vue component

var profileComponent = {
    data : function() {
        return {
            isError : false,
            loading : true,
            users : null,
            activeUser : '',                
        }
    },
    mounted() {
        axios
        .get('https://jsonplaceholder.typicode.com/users')
        .then(response => (this.users = response.data))
        .catch(error => {console.log(error);this.isError = true})
        .finally(() => {console.log('GET request from users');this.loading = false})
     },
    template : `
    <div class="profile">
        <div v-if="isError">
            <h3>There was an error</h3>
        </div>
        <div v-else-if='isLoading'>
        Loading
        </div>
        <div v-else>   
                <select v-model="activeUser">
                    <option v-for="user in users" v-bind:value="user">{{ user.name }}</option>
                </select>          
        </div>
        <div class="temp">
            <p>{{ activeUser.address.street }}</p>
        </div>
    </div>
`}

This Doesnt work but when I change {{ activeUser.address.street }} to {{ activeUser.address }} it starts working.Note the users object from jsonplaceholder website contains street ppt as well.What am I missing?

activeUser is an empty string by default so you access activeUser.address it is undefined and if you use activeUser.address.street it gives an error. — Pulkit Aggarwal
– Pulkit Aggarwal, Commented Dec 5, 2018 at 5:42

Pulkit Aggarwal · Accepted Answer · 2018-12-05 05:45:27Z

3

activeUser is an empty string by default so you access activeUser.address it is undefined and if you use activeUser.address.street it gives an error For resolving this issue you can use

<p>{{ (activeUser && activeUser.address)? activeUser.address.street : ''}}</p>

instead of simple

<p>{{ activeUser.address.street }}</p>

answered Dec 5, 2018 at 5:45

Pulkit Aggarwal

2,7024 gold badges26 silver badges35 bronze badges

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

1 Comment

dan brown Over a year ago

Works now thanks.Will mark this as most useful in some time

Collectives™ on Stack Overflow

Vuejs nested JSON data from API not displaying

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related