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.

@ХристиянХристов see the updated question I included the docs output. — Sarotobi, Jun 04 '18 at 07:14
Its because of console.log is rendered before the data is populated. If i am not wrong, u should be loading data via ajax call. Its perfectly normal. To test, use setTimeout and give an interval 1000 or 5000 you will see the console.log devices — Alaksandar Jesus Gene, Jun 04 '18 at 07:20

score 6 · Accepted Answer · answered Jun 04 '18 at 07:31

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)

Yes I have, but still, working on `Framework7` since it uses a template for its pages I am looking to delay a load of these pages after all data has been pushed into device array, thank you for very much for that. — Sarotobi, Jun 04 '18 at 07:38

Javascript Array looks like its empty but has a value

1 Answers1