How do I await Angular4 HttpClient response?

Question

I'm trying to move my Api calls to a service. Until now I've made api calls in every component that needed it, which also resulted to passing a lot of variables to other components and generally resulted in a lot of garbage in my code.

So, when my api calls were in my component, where I needed the objects that I requested, it was all fine - I've launched the HttpClient get method, and the page updated when the correct object was received.

Now, when I'm trying to move it to a service, it doesn't update - I'll explain it in my code.

Here's the method in my service:

getProjects(): any {
    this.http.get<Project[]>('http://localhost:54639/api/tfs/projects').subscribe(data => {
        console.log(data['value']);
        return data['value'];
    });
}

And here's the request to this method I'm making in my component:

ngOnInit(): void {
  console.log("I'm in OnInit!");
  this.projects = this.ApiConnection.getProjects();
  console.log(this.projects);
}

So, here's the problem: my console first logs "I'm in OnInit!", then logs undefined - both from ngOnInit, and then it logs the correct data form getProjects() in my service.

I'm trying to somehow await this, but to be honest, I've got no idea how. I tried making a promise out of it, tried using await, map or .then(), but it doesn't seem to work, and google isn't helping much.

Edit: ugh, I do get it's asynchronous, I've even specified "how to await" in the title... Problem is, I've got no idea how to do it in TypeScript and with Angular4 HttpClient. The answers in the topic I've supposedly duplicated are regarding callbacks and premises, while I'm trying to await an observable....

`getProjects` is not returning a value and even if it was, it would be `Observable`, which you'd need to subscribe to. — Kirk Larkin, Sep 07 '17 at 09:36

asimhashmi · Accepted Answer · 2017-09-07T09:49:33.127

1

Try this,

getProjects(): any {
    return this.http.get<Project[]>('http://localhost:54639/api/tfs/projects').map(data => {
        console.log(data['value']);
        return data['value'];
    });
}

And in your ngOnInit()

ngOnInit(): void {
  console.log("I'm in OnInit!");
  this.ApiConnection.getProjects().subscribe(data =>{
  this.projects = data;
  console.log(this.projects);
  });

}

edited Sep 07 '17 at 09:49

answered Sep 07 '17 at 09:43

asimhashmi

4,258
1
14
34

It compiles, but when I launch the app I get an error in the console: this.ApiConnection.getProjects(...).subscribe is not a function at TfsComponent.webpackJsonp.../../../../../src/app/tfs/tfs.component.ts.TfsComponent.ngOnInit (tfs.component.ts:52) at checkAndUpdateDirectiveInline ( – Nech Sep 07 '17 at 09:44
You'll need to switch the `subscribe` in `getProjects` to `map` and then use `subscribe` in the component. – Kirk Larkin Sep 07 '17 at 09:47
I updated the answer to use the `map` instead of `subscribe` in the `getProject()` method, hope it works now – asimhashmi Sep 07 '17 at 09:51
Now it says "Property 'map' does not exist on type 'Observable." Doesn't even compile. Am I missing an import or sth? – Nech Sep 07 '17 at 09:51
1

`import 'rxjs/add/operator/map' ` write this after your imports, kindly accept the answer if it works – asimhashmi Sep 07 '17 at 09:53

How do I await Angular4 HttpClient response?

1 Answers1