I'm faced with a situation where I have two distinct API endpoints. One endpoint returns a single Card object, while the other endpoint returns an Array of Card objects. My goal is to retrieve the first Card from the single Card endpoint and place it at the beginning of the Array obtained from the second endpoint. I'm wondering if there's a way to achieve this. Both endpoints return observables from HTTPClient, so I'm thinking there might be a straightforward solution using operators, but I'm not quite knowledgeable enough to implement it yet. To provide a clearer example:
Current configuration:
latestCards$: Observable<Cards> = http.get('latestCardsEndpoint');
// { title: 'Latest', cards: [], ... }
featuredCards$: Observable<Cards[]> = http.get('featuredCardsEndpoint');
// [
// { title: 'Featured1', cards: [], ... },
// { title: 'Featured2', cards: [], ... },
// ...
// ]
Desired outcome:
homeCards$: Observable<Cards[]>;
// [
// { title: 'Latest', cards: [], ... },
// { title: 'Featured1', cards: [], ... },
// { title: 'Featured2', cards: [], ... },
// ...
// ]