http get request returning undefined

Question

I am running in an Ionic/Angular environment I am trying to do a simple get request using HttpClient my code is as follows :

  ngOnInit(){
this.userprovider.getUsers()
  .subscribe(users => this.users = users, 
    errmess => this.userErrMess = <any>errmess);
  console.log(this.users);
 }

my getUsers function looks like this

getUsers(): Observable<User[]> {
return this.http.get<User[]>(baseURL + 'users')
  .do(data => console.log('All: ' + JSON.stringify(data)))
 .catch(this.handleError);

}

my console log looks like this

profile.ts:44 - undefined

user.ts:30 - All: [{"id":0,"featured":true,"username":"Jackie","password":"password","birthday":"Oct 1, 1994","numkids":2,"profileImg":"images/jackie.jpg","description":"Description goes here","pics":[{"image":"/public/images/jackie.jpg","description":"Description goes here","numLikes":24,"numFavs":3,"comments":[{"description":"Description goes here","author":"user1","date":"Today"},{"description":"Description goes here","author":"user1","date":"Today"}]}],"feed":[{"description":"My first update!","numLikes":12,"numFavs":1,"comments":[{"description":"Description goes here","author":"user1","date":"Today"}],"date":"Today"}],"messages":[],"startDate":"Yesterday","numFriends":28,"numMombo":4}]

I know that I am able to retrieve JSON data because I am able to log it to the console. However, it seems that in ngOnInit when I call the getUser function it is returning undefined. I cannot find an answer as to why this is returning undefined?

Possible duplicate of [How do i console log the results inside the subscribe?](https://stackoverflow.com/questions/43628493/how-do-i-console-log-the-results-inside-the-subscribe) — Sajeetharan, Dec 20 '17 at 17:48

score 4 · Accepted Answer · answered Dec 20 '17 at 17:46

4

you need to add the console log inside the subscribe. since javascript is asynchronous, it does not wait until the XHR response. it keeps on executing. that is why console print undefined. Because at that time response is not assign to users variable.

ngOnInit() {
      this.userprovider.getUsers()
          .subscribe((users) => {
                  this.users = users
                  console.log(this.users);
              },
              errmess => this.userErrMess = < any > errmess);
  }

answered Dec 20 '17 at 17:46

Sachila Ranawaka

39,756
7
56
80

1

This fixed the issue. Thank you so much! I have to wait a few minutes before I can mark this as the answer, but I will when it lets me – Logan Musselman Dec 20 '17 at 17:49
this is not related to the question you answered (or it might be!), however, I was able to get all my information from API minus my image. I have checked the error log and it is showing error 404 not found. I notice that it is directing to the correct location except that there is an unknown property in the file directory? example: should be localhost:3000/images/image.jpg but I am showing localhost:3000/*undefined*images/image.jpg. Do you have any idea why this would be showing? – Logan Musselman Dec 21 '17 at 13:08

http get request returning undefined

1 Answers1