Error getting JSON property in Vue js

Question

I have encountered a strange behavior with Vue. I make an ajax call store the result (some JSON) to a Vue data property named: 'modello'.

{
 "lineaGialla": {
 "selected": false,
 "descrizione": "Questa è la descrizione della linea gialla",
 "servizi": [
 {"nomeServizio": "servizio1","descrizione":"descrizione servizio1","selected": false},
 {"nomeServizio": "servizio2","descrizione":"descrizione servizio2","selected": false},
 {"nomeServizio": "servizio3","descrizione":"descrizione servizio3","selected": false}
 ]
 }
} 

In the template, when I access the data property lineaGialla using {{modello.lineaGialla}} it works, but when I try to access a nested property, such as {{modello.lineaGialla.descrizione}}, I get an error in the console:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"

Here the ajax call.

var getData = function(){
 return new Promise(function(resolve, reject){
 $.ajax({
 type:'get',
 url:'https://api.myjson.com/bins/w9xlb',
 dataType: 'json',
 success: function(response){
 resolve(response);
 }
 });
 });
};

Here is my Vue.

var Metromappa = new Vue({
 el: '#metromappa',
 data: {
 modello:{}
 },
 methods:{
 },
 mounted: function(){
 var self = this;
 getData().then(function(response){
 self.modello = response;
 }, function(error){
 console.log(error);
 });
 } 
})

What could it be?

• Dan Philip Bejoy: Please post the render part as well.

Answer 1

The problem here is data is retrieved asynchronously, meaning your data is not there when Vue first renders the template. Here is the sequence of events:

1. The created lifecycle event is called
2. You make a request to the server for data
3. Vue lifecycle completes and Vue is first rendered with no data
4. Your ajax call for data completes
5. Vue re-renders

The problem here is step number 3. When you try to access the descrizione property in your template

{{modello.lineaGialla.descrizione}}

lineaGialla is undefined because the data is not yet retrieved from the server. So, in essence you are trying to read the descrizione of undefined and that is a javascript error.

What you should do check to make sure you have data before you try to access properties on data that may not be populated immediately.

{{modello.lineaGialla && modello.lineaGialla.descrizione}}

Alternately, if this interpolation is in some element, you can prevent the element from rendering until there is data.

<div v-if="modello.lineaGialla">
 {{modello.lineaGialla.descrizione}}
</div>

What both of these are doing is checking to make sure that lineaGialla is a non falsy value. If it is, then it renders the data.

The reason you are OK when you render {{modello.lineaGialla}} is because Vue will just render nothing. The problem is when you try to access a property of an undefined value. That will blow up every time.