title: Javascript Array looks like its empty but has a value
body: <p>I am a novice on javascript and starting to learn objects and arrays I just want to know why my array looks like its empty but when you click it has a value? See below code, I am using <code>nedb</code> and <code>Framework7</code>.</p>
  
  <pre><code>var DeviceArray = new Array();
  
  db.find({}, function (err, docs) {
  
       docs.forEach(function(element) {
  
          $$("#listDevice").append('&lt;li&gt;&lt;a href="single/'+element._id+'"&gt;'+element.device+'&lt;/a&gt;&lt;/li&gt;');
  
          DeviceArray.push(element);  
  
       });
  
  });
  </code></pre>
  
  <p>Now putting the DeviceArray into a object.</p>
  
  <pre><code>    user: [{
          firstName: 'Jhon',
          lastName: 'Doe',
        }],
  
  
        products: [
          {
            id: '1',
            title: 'Apple iPhone 8'
          },
          {
            id: '2',
            title: 'Apple iPhone 8 Plus'
          },
          {
            id: '3',
            title: 'Apple iPhone X'
  
          },
        ],
  
        devices: DeviceArray
  </code></pre>
  
  <p>Then when I try to check the object this appear.</p>
  
  <p><a href="https://i.stack.imgur.com/cytva.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cytva.png" alt="enter image description here"></a> </p>
  
  <p>The devices look empty but when you click it this appears.</p>
  
  <p><a href="https://i.stack.imgur.com/G01Jf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G01Jf.png" alt="enter image description here"></a></p>
  
  <p>I thought this was ok but when I tried to iterate the devices Array it returns nothing, so my question is how do I correct this? I already checked the <code>docs</code> output see below image, any suggestion would be great.</p>
  
  <p><a href="https://i.stack.imgur.com/EOfuI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EOfuI.png" alt="enter image description here"></a></p>