[Vuejs]-Vue js not displaying nested json

by

0👍

✅

So I found the root cause and it had nothing to do with vue.

Basically I have two models – owners and bicycles. Bicycles have a ref to a single owner. And owners have ref to an array of bicycles. I added @JsonIdentityInfo to both. And that was my problem.

Changing this to having @JsonIdentityInfo only in owner then allowed it to work.

Many thanks for all of the suggestions.

0👍

I think the response you are getting is as follows where owner is also a string.
So you might have to parse it before assigning it to bikes.

[{
    make: 'one',
    owner: '{ "id": 1, "userName": "user1"}'
}, {
    make: 'two',
    owner: '{ "id": 2, "userName": "user2"}'
}, {
    make: 'three',
    owner: '{ "id": 3, "userName": "user2"}'
}]

Hope this helps.

Update 1

Can you try adding a loading flag?
https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

new Vue({
    el: '#axios',
    data: function() {
      return {
        bikes: null,
        loading: true
        baseurl: "https://" + document.querySelector('#axios').dataset.hostportname + "/",
      }
    },
    mounted () {
      axios({
        method: 'get',
        url: 'api/v1/bicycles',
        baseURL: this.baseurl
      })
        .then(response => {
          this.bikes = response.data
          console.log("now bikes are " + JSON.stringify(this.bikes[0].owner.userName));
        }) 
        .catch(error => console.log("There is an error getting bikes: " + error)).finally(() => this.loading = false)
    }
  })

And add v-if to your block

<div id="axios" v-if="!loading" th:data-hostportname="${hostportname}">
    <li v-for="bike in bikes" :key="bike.id">
        {{ bike.make }} ------  {{ bike.owner.id }}   
    </li> 
</div>

Leave a comment