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?

Why don't you just do `objects = response`? Also, where is `objects` defined ? — Zze, Nov 14 '18 at 11:49
What? The screenshot says length: 6. Where do you get that it's 0? — ShamPooSham, Nov 14 '18 at 11:50
In another file but even if i checked in above code, still is 0 — Kamil Kamil, Nov 14 '18 at 11:51
I think we need some more code to help you with this. Where is object defined? — ShamPooSham, Nov 14 '18 at 11:51
Please provide some [stackblitz](https://stackblitz.com/), currently it's unclear how you come to this situation, and what do you need. (for Angular, the best way to create a [mcve] is currently to use StackBlitz) — Pac0, Nov 14 '18 at 11:51
@KamilKamil That means the code you've posted is working correctly - the part of your code where you find the length is zero is the problem here. — MTCoster, Nov 14 '18 at 11:54
By the way, with ES6 / TypeScript, if you want to append values to an array, you can simply do this : `objects = [...objects, ...response];` This should help clear out any problem with indices when using a `for` loop. — Pac0, Nov 14 '18 at 11:54
The `console.log` in your above example will print 0 because your closure hasn't been executed yet. — MTCoster, Nov 14 '18 at 11:56
you read the length syncronously but you provide the arrays content asyncronously.. — GottZ, Nov 14 '18 at 11:57
Okay, now that you updated the question I see the issue. Observables run asynchronously, so the code after the subscribe may very well run before the code inside the subscribe. — ShamPooSham, Nov 14 '18 at 11:57
It depends what you want to do with the object later. If it's not too much, you can put the logic inside the subscribe — ShamPooSham, Nov 14 '18 at 11:59
@ShamPooSham I need use this object in another file, so i need to do this outside — Kamil Kamil, Nov 14 '18 at 12:00

score 1 · Answer 1 · answered Nov 14 '18 at 12:01

1

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);
  }
);

answered Nov 14 '18 at 12:01

Igor Janković

5,494
6
32
46

Yes but i have to return "objects" – Kamil Kamil Nov 14 '18 at 12:10

score 1 · Answer 2 · answered Nov 14 '18 at 12:07

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.

score 0 · Answer 3 · answered Nov 14 '18 at 12:02

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.

Okay. My "objects" must be array, because it will be used in ngFor. In another file I check objects.length and I little parse this list. So this must be synchronous or idk.. — Kamil Kamil, Nov 14 '18 at 12:16
@KamilKamil I'm not familiar using Angular observables but maybe [this answer](https://stackoverflow.com/questions/37669871/using-an-array-from-observable-object-with-ngfor-and-async-pipe-angular-2) will help. — HMR, Nov 14 '18 at 12:22

score -1 · Answer 4 · answered Nov 14 '18 at 12:46

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));

Javascript array length always is 0

4 Answers4