Angular 2 - Array of Objects is still undefined after a HTTP Request

Question

I'm using this guide to learn angular 2 http requests. My array of objects is still undefined after an http.get() request.

Service code:

getUserCompaniesByUserId(userId: string) : Observable<ApplicationUserCompany[]> {
    return this.http.get(`${this.url}/${userId}`)
                    .map(res => res.json())
                    .catch(this.handleError);
}

private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }

    console.error(errMsg);
    return Observable.throw(errMsg);
}

Component code:

getCompanies() {
    this.companyService.getUserCompaniesByUserId(localStorage.getItem('user_id'))
                            .subscribe(
                                uc => this.userCompanies = uc,
                                error => this.errorMsg = <any>error
                        );

    this.userCompanies.forEach(uc => {
        ...
        ...
    });
}

Because the userCompanies array is undefined after the request, it won't enter in the forEach() loop. It throws this error: "TypeError: Cannot read property 'forEach' of undefined".

Not the request is the error, because I tested it with Postman and Application Insights (my API is .NET Core API). The response code is 200. Somewhere else is the problem, but I cannot find it.

Thank you!

Try moving the foreach inside the subscribe

Eduardo Vargas
– Eduardo Vargas

2017-06-07 12:37:37 +00:00
Commented Jun 7, 2017 at 12:37 — Eduardo Vargas
– Eduardo Vargas, Commented Jun 7, 2017 at 12:37

jLee · Accepted Answer · 2017-06-07 13:09:55Z

2

I believe the issue is caused by the below code being fired before the http request is finished. Since the http request is ajax it get fired and then the code after that is fired.

You need to drop the below code into the callback of the subscription so that it only fires once you are sure response has been returned from the server.

this.companyService.getUserCompaniesByUserId(localStorage.getItem('user_id')).subscribe(
    uc => {
      this.userCompanies = uc;
      this.userCompanies.forEach(uc => { ... }); 
   },
   error => this.errorMsg = <any>error
  );

answered Jun 7, 2017 at 13:09

jLee

4832 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eduardo Vargas · Accepted Answer · 2017-06-07 12:40:27Z

1

Try something like

this.companyService.getUserCompaniesByUserId(localStorage.getItem('user_id'))
                        .subscribe(uc => {
                         this.userCompanies = uc
                         this.userCompanies.forEach(uc => {});     
})

answered Jun 7, 2017 at 12:40

Eduardo Vargas

9,5022 gold badges22 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Array of Objects is still undefined after a HTTP Request

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related