Code is running before API call response in typescript

Question

Before my API response below code is getting running. I want to get a response from the API call based on the API response I want to proceed further

 this._httpservice.getOrderList().subscribe((response: any) => {
  Object.entries(response.content).forEach(([key, value]) => {
    this.orderList.set(key, value as Array<String>);   //Set Value in Map
  });
}, error => {
  this.errorDetails = error;
});

//Based on the Map value I want to push values in an array

this.orderList.get(this.orderName).map(value => {
  this.availableOrders.push(value);
});

Either you move your code inside the subscribe or you convert the observable (getOrderList) and await it instead of a subscription. — Thomas Renger
– Thomas Renger, Commented Jul 4, 2022 at 19:23
Additional information: the subscription is async and the code below is processed directly. this is way you need "special" strategies to handle your case. — Thomas Renger
– Thomas Renger, Commented Jul 4, 2022 at 19:25
I tried adding inside subscribe but it is not working as expected — Subathra
– Subathra, Commented Jul 4, 2022 at 19:31
What is your expectation? (i guess in this case more details needed) — Thomas Renger
– Thomas Renger, Commented Jul 4, 2022 at 19:34

JSmart523 · Accepted Answer · 2022-07-04 21:04:23Z

As a rule of thumb, do not subscribe to something that is set via subscription, and do not subscribe within a subscribe. Both are strong indicators there's a better way.

In your case, it sounds like you want availableOrders to be updated as appropriate. Have you considered making availableOrders an observable?

For example:

type OrderList = Record<string, Array[string]>;


const orderList: OrderList = {};

const orderList$ = this._httpservice.getOrderList().pipe(
  map(({content}) => Object.assign(this.orderList, content)),
  shareReplay(1) // not needed if you only have one downstream subscriber
);

const orderName$: Subject<string> = new Subject(); // no idea how you populate this in your app. Maybe FormControl.ValueChanges?

const availableOrders$ = this.orderName$.pipe(
  combineLatestWith(this.orderList$),
  map(([nm, orderList]) => orderList[nm])
);

No subscriptions you need to clean up. And then in your template you can replace availableOrders with availableOrders$ | async.

Collectives™ on Stack Overflow

Code is running before API call response in typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related