Vue.js - cannot read property even though the object exists - firebase

Question

I used vue-resource to fetch data from firebase. basically when I loop through each object under the orders directory, I match the userId of that object, find the object under the users directory, and save it on my local array as a nested object (userData) along with the retrieved orders objects. here's my code:
//retrieve objects from orders
this.$http.get('https://nots-76611.firebaseio.com/Orders.json').then(function(data){
return data.json();
}).then(function(data){
var ordersArray = [];
for (let key in data){
data[key].id = key;
data[key].measurementsArray = Object.entries(data[key].measurements).sort();
//retrieve a specific user based on the userId of each orders object
this.$http.get('https://nots-76611.firebaseio.com/Users/' + data[key].userId + '.json').then(function(userdata){
return userdata.json();
}).then(function(userdata){
data[key].userData = userdata; //store the object
});
ordersArray.push(data[key]); //pass the object along the userData
}
this.orders = ordersArray;
console.log(this.orders);
});
the object structured shown in the console is perfectly fine:
but when I try to, access the nested object in the dom via {{ order.userData.Address }}:
<tr v-for="order in orders"
<dialog class="mdl-dialog" ref="userDialog">
<h4 class="mdl-dialog__title">Customer's Information</h4>
<div class="mdl-dialog__content">
{{ order.userData.Address }}
</div>
<div class="mdl-dialog__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" v-on:click="closeUser(ndx)">
OK
</button>
</div>
</dialog>
</tr>
it says Error in render function: "TypeError: Cannot read property 'Address' of undefined". I don't understand it because I can easily retrieve the properties in the measurements object (which is also a nested object)
did I messed up in the retrieval process? or in the DOM rendering?
EDIT:
I tried using {{ order }} instead of {{ order.userData.Address }} and it seems like the userData object was not stored in each of the orders object
Also, I noticed something strange about how the userData object is shown differently from the measurements object which is originally stored there along with the parent object:

Answer 1

There are two primary issues here.
First, the data is retrieved asynchronously which means, it does not exist when the component is first rendered. In the template you use
order.userData.Address
There is a point in time when there are orders but there is no userData, because the data has not been retrieved yet. That being the case, Vue attempts to render the orders, and tries to render order.userData.Address, but there is no userData. That's why you get the error, "Cannot read property 'Address' of undefined". In order to fix that, you should use a guard to make sure to only try to render Address when it is available.
{{orders.userData && orders.userData.Address}}
That will prevent the error.
There is a secondary error that you probably have not yet noticed. userData is not reactive. The reason for this is because Vue cannot detect when properties are added to an object after that object has been added to data. The code is setting userData like so:
data[key].userData = userdata;
and this occurs after the orders array has been added to the Vue because it is performed in an asynchronous call. Instead, you should use,
this.$set(data[key], 'userData', userdata)