I’m having trouble understanding how to handle multiple pages of search results using the Spotify API. Here’s what I’m working with:
var spotifyAPI = getSpotifyApi();
var apiModels = spotifyAPI.require('$api/models');
var musicSearch = new apiModels.Search('Taylor Swift');
musicSearch.localResults = apiModels.LOCALSEARCHRESULTS.APPEND;
var resultsContainer = document.getElementById('search-output');
musicSearch.observe(apiModels.EVENT.CHANGE, function() {
var trackList = musicSearch.tracks;
var docFragment = document.createDocumentFragment();
for (var j=0; j<trackList.length; j++){
var listItem = document.createElement('li');
var anchor = document.createElement('a');
anchor.href = trackList[j].uri;
listItem.appendChild(anchor);
anchor.innerHTML = trackList[j].name;
docFragment.appendChild(listItem);
}
resultsContainer.appendChild(docFragment);
});
musicSearch.appendNext();
I think appendNext() starts the search and the callback runs when results come back. But I only get 50 results by default. How do I fetch the remaining results? Do I need to call appendNext() multiple times from within the callback function?
When I call it again, do the new results get added to my existing list or do they replace what I already have? I need to search through thousands of results but can’t find a good example.
Also, if a search is already running, appendNext() apparently does nothing. How do I know when it’s safe to request the next batch? What if I want to jump to result 900 out of 1000 total results - do I really have to call appendNext() 18 times to get there?
check if loading is true on ur search object - if it’s still fetchin data, appendNext() won’t work. skip the callback approach & just listen for the CHANGE event instead. when it fires, check if u need more results & call appendNext() again. dont spam appendNext() since its async - u’ll get weird behavior.
You’ve got it right - appendNext() starts the search and each call grabs more pages. Results pile up instead of getting replaced, that’s why you see LOCALSEARCHRESULTS.APPEND in your config. For timing, wait for the CHANGE event before calling appendNext() again. I usually set a flag when each request starts and clear it in the callback so calls don’t overlap. Just check if the search is loading before making the next request. For specific result ranges, you’ll need sequential calls unfortunately. The Spotify API doesn’t let you jump offsets directly through this interface. I’ve built a wrapper function that keeps calling appendNext() until it hits the result count I want, but heads up - this takes forever with large offsets. One gotcha - the total results aren’t always what you expect. Sometimes searches return way fewer results than you’d think, so always check the actual bounds before doing deep pagination.
The Search object manages pagination internally. When you invoke appendNext(), it fetches the next set of results and merges them with the existing list, rather than replacing it. Keep an eye on the snapshot property to know when new data is available before making further requests. For ongoing pagination, verify that musicSearch.hasMore is true after each change event to avoid unnecessary calls when no more results are available. Unfortunately, to access result 900, you’ll need to make sequential calls, as the API does not support jumping to arbitrary offsets. A recursive function that invokes appendNext() after each batch until reaching your desired result or until hasMore turns false would be a solid approach, ideally with a slight delay between requests to prevent hitting rate limits. Additionally, you can use musicSearch.snapshot.loadedItems to check the current total count.