Handle data after http get request in angular

Question

I have a service that requests data from a get method, I'd like to map the response to an object storing some Ids and use those Ids to make other http requests. I was told this isn't usually done in a callback manner, I looked at this How do I return the response from an asynchronous call? but I don't think it's the usual way to implement services, any hints are very appreciated.

Tried adding in onInit/constructor method in angular to be sure the object was filled before other methods were called without success.

@Injectable ()
export class ContactService  {
   storeIds;

   getIds(callback: Function) {
   this.http.get<any>(IdsUrl, Config.options).subscribe(res => {
       callback(response);
   });

   getIds(res => {
        this.storeIds = {
          profileId: res.profile,
          refIds: res.refIds
        }
     }
   )

   // this.storeIds returns undefined as it's an async call
   this.http.post<any>(WebserviceUrl + this.storeIds.profileId , data, headers )

   // .....Many other web services that relay on this Ids
}

what is your problem? what issue you are facing in which line of your code? — Nithya Rajan
– Nithya Rajan, Commented Mar 8, 2019 at 4:49
Do you want chain of remote calls after getting the response from getIds call? I didnt understand that part. Or is that you want to put the response you got somewhere so that you can use it for future api calls. Can you make it clear? — sandy
– sandy, Commented Mar 8, 2019 at 4:52
I want to store this Ids somewhere for future api calls, without having to enter in a bunch of callbacks to access them. — Jaime FH
– Jaime FH, Commented Mar 8, 2019 at 4:57
Are u going to make all those calls from contact service or from other services? I just wanted to know if you want this response data outside the contact service? — sandy
– sandy, Commented Mar 8, 2019 at 5:06
Yes the intention is to call it from other services as ´this.myService.postSomething(data, callback)´ having this id's already existing — Jaime FH
– Jaime FH, Commented Mar 8, 2019 at 5:08

sandy · Accepted Answer · 2019-03-08 05:20:53Z

1

Just create another service called StoreIdsService. Update the response you get from your first api call 'getIds' in the StoreIdsService. The idea is to have StoreIdsService as singleton service to keep state of your storeIds. You can inject StoreIdsService in anywhere component you want to get the storeIds.

Its one of manyways to share data in angular between components.

Please refer to this answer someone has posted.

How do I share data between components in Angular 2?

answered Mar 8, 2019 at 5:20

sandy

1501 silver badge14 bronze badges

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

Comments

Nithya Rajan · Accepted Answer · 2019-03-08 05:05:51Z

You can simply assign the service response to the storeIds property inside the subscribe method. and call the subsequent services inside it if you need.

@Injectable ()
export class ContactService  {
   storeIds;

   getIds() {
   this.http.get<any>(IdsUrl, Config.options).subscribe(res => {
       this.storeIds = {
          profileId: response.profile,
          refIds: response.refIds
        }

      this.otherapicall1();
      this.otherapicall2();
   });

}

Collectives™ on Stack Overflow

Handle data after http get request in angular

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related