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, Mar 08 '19 at 04: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? — santosh, Mar 08 '19 at 04: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, Mar 08 '19 at 04: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? — santosh, Mar 08 '19 at 05: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, Mar 08 '19 at 05:08
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 in anywhere you want to get the storeIds. — santosh, Mar 08 '19 at 05:17
Tho the answer satisfies what I was looking for, my actual problem was not setting the response correctly, I had res => myObject = { id: res.id , id2 : res.id2, .... }, and needed to use Object.assign() or with spread operator :) — Jaime FH, Mar 09 '19 at 06:55

score 1 · Accepted Answer · answered Mar 08 '19 at 05:20

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?

score 0 · Answer 2 · answered Mar 08 '19 at 05:05

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

}

Handle data after http get request in angular

2 Answers2