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

Answer 1

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

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

Answer 3

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