title: Vue.js - cannot read property even though the object exists
body: <p>I used <em>vue-resource</em> to fetch data from <em>firebase</em>. basically when I loop through each object under the <em>orders</em> directory, I match the <em>userId</em> of that object, find the object under the <em>users</em> directory, and save it on my local array as a nested object <em>(userData)</em> along with the retrieved <em>orders</em> objects. here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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);
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>the object structured shown in the console is perfectly fine:</p>
  
  <p><a href="https://i.stack.imgur.com/ruEq4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ruEq4.png" alt="enter image description here"></a> </p>
  
  <p>but when I try to, access the nested object in the dom via <code>{{ order.userData.Address }}</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;tr v-for="order in orders"
  &lt;dialog class="mdl-dialog" ref="userDialog"&gt;
                    &lt;h4 class="mdl-dialog__title"&gt;Customer's Information&lt;/h4&gt;
                    &lt;div class="mdl-dialog__content"&gt;
                      {{ order.userData.Address }}
                    &lt;/div&gt;
                    &lt;div class="mdl-dialog__actions"&gt;
                      &lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" v-on:click="closeUser(ndx)"&gt;
                        OK
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/dialog&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>it says <code>Error in render function: "TypeError: Cannot read property 'Address' of undefined"</code>. I don't understand it because I can easily retrieve the properties in the <em>measurements</em> object (which is also a nested object)</p>
  
  <p>did I messed up in the retrieval process? or in the DOM rendering?</p>
  
  <p>EDIT:
  I tried using <code>{{ order }}</code> instead of <code>{{ order.userData.Address }}</code> and it seems like the <code>userData</code> object was not stored in each of the <code>orders</code> object</p>
  
  <p>Also, I noticed something strange about how the <code>userData</code> object is shown differently from the <code>measurements</code> object which is originally stored there along with the parent object:</p>
  
  <p><a href="https://i.stack.imgur.com/8o7wn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8o7wn.png" alt="enter image description here"></a></p>