Javascript array length always is 0

Question

I tried map elements to [] for angular. But if I checked length of objects there is always 0..

var objects = [];

this.get().subscribe(
  response => {
    for (var i = 0; i < response.length; i++) {
      objects.push(response[i]);
    }
  }
);
console.log(objects.length);

screen if I console.log(objects)

What I am doing wrong?

Answer 1

This is due to the asynchronous nature of execution of the code. The subscribe method accepts a callback, which is the arrow function that you have written with the parameter named response.

So, the callback will not be executed immediately but will be done after a while. But, since JS is asynchronus, it wouldn't wait for the callback to get executed and will move on to the next line of the code where the variable will still be an empty array.

As suggested in the other answers, you could put the console log within the callback function to log the expected value.

Answer 2

You are doing console.log before getting response in subscribe. Just move console.log inside subscribe.

var objects = [];

this.get().subscribe(
  response => {
    for (var i = 0; i < response.length; i++) {
      objects.push(response[i]);
    }
    console.log(objects.length);
  }
);

Answer 3

You are logging something that's set later so the preview shows an empty array but you can expand it.

The log will show the item as it is right now; not as it is when you log it.

var arr = [];
console.log(arr);//shows [] but when you expand it it shows items
arr.push({name:'john'});

If you want to see an object's values at the time you are logging the object and plan to mutate it after the log then you can do the following:

console.log(JSON.stringify(object,undefined,2);

Your objects.push(response[i]); statement is in a callback and that callback is probably called after your console.log(objects.length); you can proof that by adding another log:

var objects = [];

this.get().subscribe(
  response => {
    console.log('second log')
    for (var i = 0; i < response.length; i++) {
      objects.push(response[i]);
    }
  }
);
console.log("first log",objects.length);

If you have a value that resolves once at a later time then you could use Promises but it looks like you subscribe to an event that can resolve multiple times so your response will only be available in the callback.

Answer 4

Seems that subscribe code is async, so you can wrap this up on a promise. result is the objects you want

const promise = new Promise((resolve, reject) => {
  var objects = [];
  this.get().subscribe(response => {
    for (var i = 0; i < response.length; i++) {
      objects.push(response[i]);
    }
    resolve(objects);
  });
});

promise.then(result => console.log(result));