I am making calls to the spotify api which returns an object like so:
{
next: 'https://api.spotify.com/v1/me/tracks?offset=100&limit=50'
items: [...]
}
where items are the result of the just-made network call and next is the url to use to get the next 'page' of results. What i would like to do is make an initial call with no offset, and then keep making network calls until next is null, meaning the user has no more items left to get. If there are no more items they send back null for next.
This seems possible but cant seem to figure out how to do it correctly. What I am looking for is something like this:
readonly baseSpotifyUrl: string = 'https://api.spotify.com/v1';
constructor(private http: HttpClient) {}
public getTracks(url?: string): Observable<any> {
return this.http.get(url && url?.length > 0 ? url : `${this.baseSpotifyUrl}/me/tracks?limit=50`);
}
public getAllTracks(): Observable<any> {
const tracks$: Subject<any> = new Subject();
let next: string = '';
this.getTracks(next)
.subscribe({
next: (res: any): void => {
tracks$.next(res.items);
next = res.next;
// if res.next !== null, do this again now that we have set next to res.next
},
error: (err: any): void => {
console.error(err);
}
});
return tracks$;
}
The idea here is that my component will call getAllTracks() and receive a subject and then new items will be continuously pushed through that subject until all the items have been retrieved. I cannot seem to figure out how to make a new network request when the previous one returns ONLY IF there are more items to get (res.next !== null)
EDIT-----------------------------------------------------------
This gets the job done but I feel that its trash:
public getAllTracksSegment(itemsSubject: Subject<any>, nextSubject: Subject<string>, url?: string): void {
this.http.get(url && url?.length > 0 ? url : `${this.baseSpotifyUrl}/me/tracks?limit=50`).subscribe({
next: (res: any): void => {
itemsSubject.next(res.items);
nextSubject.next(res.next);
}
});
}
public getAllTracks(): Observable<any> {
const tracks$: Subject<any> = new Subject();
const next$: Subject<string> = new Subject();
next$.subscribe({
next: (next: any): void => {
if (next !== null) {
this.getAllTracksSegment(tracks$, next$, next);
}
}
});
next$.next('');
return tracks$;
}
If I understand the issue right, I would use the expand operator to build a solution.
Here the code I would use. Comments are inline
public getTracks(url?: string): Observable<any> {
return this.http.get(url && url?.length > 0 ? url : `${this.baseSpotifyUrl}/me/tracks?limit=50`);
}
public getAllTracks(): Observable<any[]> {
// the first call is with no parameter so that the default url with no offset is used
return getTracks().pipe(
// expand is used to call recursively getTracks until next is null
expand(data => data.next === null ? EMPTY : getTracks(data.next)),
// with tap you can see the result returned by each call
tap(data => console.log(data)),
// if you want you can use the reduce operator to eventually emit the
// accumulated array with all items
reduce((acc, val) => {
acc = [...acc, ...val.items]
return acc
}, [])
)
}
// now you can fire the execution of the recursive calls by subscribing
// to the observable returned by getAllTracks
getAllTracks().subscribe(
// allItems is an array containing all the items returned by the various calls
allItems => console.log(allItems)
)
ADDITIONAL EXPLANATIONS after the comments of @skyleguy
The tap operator is used to implement side effects. In other words it receives all the notifications from the upstream, does whatever it needs to do with the data notified and then passes downstream the same notification. There is no need to return anything from the function passed to the tap operator. The upstream is just passed downstream after the side effect is applied. In this example the side effect is simply the print on the console of the data passed with the notification.
The reduce used within the pipe is the reduce operator of RxJs and not the reduce method of Array. The reduce RxJs operator accumulates all the data notified from upstream and emits only one value when upstream completes. So, in this example, every time the call to the remote function returns something, this something enters the reduce operator and contributes to the accumulation logic. When expand returns the EMPTY Observable, at the end of the recursion, the EMPTY Observable just completes without notifying anything, which means that upstream completes and therefore reduce can emit its first and only notification, i.e. the array with all items accumulated, and then complete.
This stackblitz replicate this logic with a simulation of the remote call.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments