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
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
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
}
})
How about this.data = res.sort( (a,b) => a.score - b.score );