Javascript Array looks like its empty but has a value

Question

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 nedb and Framework7.

var DeviceArray = new Array();

db.find({}, function (err, docs) {

     docs.forEach(function(element) {

        $$("#listDevice").append('<li><a href="single/'+element._id+'">'+element.device+'</a></li>');

        DeviceArray.push(element);  

     });

});

Now putting the DeviceArray into a object.

    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

Then when I try to check the object this appear.

The devices look empty but when you click it this appears.

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 docs output see below image, any suggestion would be great.

Answer 1

I have recreated your scenario in jsfiddle.

https://jsfiddle.net/1j4gu2f1/

There are two consoles, with and without setTimeout and both will give different representation on collapsed state but same result on expanded state.

I presume the code is self explanatory.

var devices = [];

setTimeout(function(){ //data loaded after 1000 ms
 devices.push({"name":"hello"});
 devices.push({"name":"world"})
},1000);

console.log(devices); // will show empty devices

setTimeout(function(){
    console.log(devices); // will show devices array
},1000)