Sort array of object based on nested api call Angular

Question

I have to sort array of object based on array response of first API call. The data should be sorted in ascending order.

Currently I have first api call which returns list of array that will be used in the next api call.

 this.service.fetchStories()
    .pipe(
      take(1),
    ).subscribe((res: any) => {
      this.storyIds = res;
    });

The first call return something like this.

[0001,0002,0003,0004,0005]

And I am looping over the storyIds and passed it in the card component

<div *ngFor="let id of storyIds | slice: start:end">
    <app-cards [id]="id"></app-cards> 
</div>

And I'm fetching the second api based on the ids in my card component

this.service.fetchStoryItems(this.id)
    .pipe(
      take(1)
    )
    .subscribe((res: StoryItem) => {
      if (res !== undefined) {
        this.data = res;
      }
    })

The second api returns each response after the loop

 {name: 'John', score: 1}
 {name: 'Jane', score: 99}
 {name: 'Joe', score: 53}

I'm stuck here and want to sort items based on the score which is returned by the second api call.

I'm thinking something like pushing each object to an array and sort the new array of objects

Answer 1

The best solution would be to make app-cards dumb and provide the already fetched story to app-card.

Component

this.service.fetchStories().pipe(
  switchMap(idArray => forkJoin(idArray.map(id => this.service.fetchStoryItems(this.id)))),
  map(storyArray => storyArray.sort((a,b) => a.score - b.score)),
  take(1),
).subscribe(res => {
  this.stories = res;
});

HTML

<div *ngFor="let story of stories | slice: start:end">
    <app-cards [story]="story"></app-cards> 
</div>

Remove the HTTP calls from app-cards

Answer 2

this.data = res.sort( (a,b) => a.score - b.score );

Answer 3

You can modify the return data from your second api-call

this.service.fetchStoryItems(this.id)
.pipe(
  take(1),
  map(response => {
    return {...response, id: this.id
  })
)
.subscribe((res: StoryItem) => {
  if (res !== undefined) {
    this.data = res;
    console.log(this.data) // should include the id and can be sorted with comparer function
  }
})