2

I'm getting an array of data from res.persons within my API call and storing it in the people array. When I console.log(this.people) I can see the elements but when I try to console.log(this.people.length) OR console.log(this.people[0]) I get undefined.

people = [];

pushAll(arr){
      for(var i = 0; i < arr.length; i++){
        this.people.push(arr[i]);
      }
 }

Here's the snippet of my component where the API call is being made.

ngOnInit() {
    this._http.get(this._url, options)
            .map((res: Response) => res.json())
            .subscribe(res => this.pushAll(res.persons));
}

This is output of console.log(this.people):

console screenshot

This has been driving me crazy, so any help will be appreciated!

blankface
  • 5,757
  • 19
  • 67
  • 114
  • 1
    Please add the complete code including the `console.log`. I strongly assume you are using the asynchronous `get` call incorrectly. – str May 03 '17 at 14:31
  • What is this pushAll method you are using, it seems weird to me that we can see __proto__: Array(0) Why will that be 0 ? – Tonio May 03 '17 at 14:33
  • pushAll simply copies the content of the response array into the `people` array. Even if you disregard that and simply do `this.people.push(res.person[0])` the problem still persists. – blankface May 03 '17 at 14:35
  • Your pushAll method... I understand that is an object method, but why is receiving only a parameter? When you declared it you added 2 arrays as parametters. – xale94 May 03 '17 at 14:37
  • 1
    @xale94 That was an error. Fixed. – blankface May 03 '17 at 14:39
  • @ZeroDarkThirty could you show us the console.log? – xale94 May 03 '17 at 14:49
  • @xale94 You mean just expand an object and put up a screenshot of that? – blankface May 03 '17 at 14:52
  • @ZeroDarkThirty mmm... no. Maybe showing us the this._http.get(this._url, options) result... – xale94 May 03 '17 at 15:04
  • 1
    Okay i think i located the issue. basically when i run a code like `console.log(this.people[0])` from `ngOnInit()` it shows undefined. But doing the same thing from `pushAll()` (which I've updated in the original post) gives me the right outputs. @xale94 – blankface May 03 '17 at 15:04
  • As so many suspected this was an async issue. Check this one to perhaps better understand it :) http://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2 – AT82 May 03 '17 at 15:10
  • 1
    And BTW, is there a reason why you are iterating the response and not just assign the data like: `.subscribe(res => this.people = res.persons);` – AT82 May 03 '17 at 15:11
  • 1
    Just move `console.log()` inside of `.subscribe()`, after `this.pushAll()`. I assume originally you have `console` inside of `ngOnInit` body... At this point backend request is not complete yet and `pushAll` has not been executed yet. You need to read more about async/observable/promise – A. Tim May 03 '17 at 15:20
  • @AJT_82 Thank you so much for the link. It really cleared things up for me. But I do want to ask, how/when can I freely use the `people` array in other parts of the code if I'm waiting for the async call to be completed? Surely not all tasks can't be done inside the `subscribe`'s callback. – blankface May 03 '17 at 15:28
  • 1
    Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](http://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) – str May 03 '17 at 15:33
  • 1
    @ZeroDarkThirty You are welcome :) You mean how to use `people` in other functions? The thing is, you really cannot do anything about the async issue, the data is available when it's retrieved. Not before. After it has been retrieved you can use it as much as you want of course, otherwise you need to either do your data manipulation inside subscribe or then make this function return an observable, which you can then subscribe to, here is more info about the latter suggestion: http://stackoverflow.com/a/37867462/6294072 This is just how async works I'm afraid :) – AT82 May 03 '17 at 15:33
  • 1
    Thanks again, I'll look into it. But this does seem to be a big drawback of going asynchronous. – blankface May 03 '17 at 15:58

0 Answers0