How to access data from observables in angular using httpClient?

Question

I'm trying to connect to API with my angular app and I want to create a get function that returns an array. Connecting works fine, but the function doesn't return what I want.

Here's code.

export class ApiService {
  constructor(private http: HttpClient) {}

  public getUsers() {
    const res = this.http.get('http://localhost:3000/user');
    res.subscribe(response => {
      console.log(response);
      return response;
    });
  }
}

console.log() prints an array, but when I try to do users = this.getUsers(); and console.log() it, it prints ZoneAwarePromise instead.

ZoneAwarePromise

Calling an asynchronous method doesn't return a value instead you can make a call back function — Nishan Dhungana
– Nishan Dhungana, Commented Nov 18, 2019 at 14:56
You do not subscribe in the service, the service returns observable and your component subscribes to the returned observable on function call. — Ploppy
– Ploppy, Commented Nov 18, 2019 at 14:58

Mikey123 · Accepted Answer · 2019-11-18 15:02:08Z

2

You need to return the obserable and await it in your component, here is an example:

Service

GetUser(): Observable<UserObject> {
    return this.http.get<UserObject>(url) 
}

And in your component you can await by doing the following:

getUserInfo() {
    this.dataService.GetUser().subscribe(response => {
      console.log(response);
    }, error => {
      console.log(error);
    });
}

answered Nov 18, 2019 at 15:02

Mikey123

1,4494 gold badges14 silver badges24 bronze badges

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

Comments

João Ghignatti · Accepted Answer · 2019-11-18 15:03:35Z

2

HttpClient.get returns an Observable, that's why you need to subscribe to get its content. So, this assign you're trying to do is not correct, your method does not return the array you want.

A common way to to this, considering that this.users is at component level would be:

.service

getUsers(): Observable<User[]> {
  return this.http.get('http://localhost:3000/user');
}

.component

users: User[];

ngOnInit {
  this.service.getUsers()
    .subscribe(users => this.users = users);
}

answered Nov 18, 2019 at 15:03

João Ghignatti

2,4112 gold badges15 silver badges26 bronze badges

Comments

Harmandeep Singh Kalsi · Accepted Answer · 2019-11-18 14:59:01Z

0

Please try below . It should work fine

export class ApiService {
  constructor(private http: HttpClient) {}

  public getUsers() {
    const res = this.http.get('http://localhost:3000/user').subscribe(response => {
      console.log(response);
      return response;
    });
  }
}

answered Nov 18, 2019 at 14:59

Harmandeep Singh Kalsi

3,3652 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to access data from observables in angular using httpClient?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related