I'm trying to get multiple data objects from The Movie Database at once using Promise.all
. After I loop through all the results of the fetch
call, and use .json()
on each bit of data, I tried to log it to the console. However, rather than an array of objects with data, I'm getting an array of Promises
. Nested in the promises, I can see my data, but I'm clearly missing a step in order to have an array of data objects, instead of just Promises
.
What am I missing here?
//store movie API URLs into meaningful variables
const trending = `=${API_KEY}`;
const topRated = `=${API_KEY}&language=en-US&page=1`;
const nowPlaying = `=${API_KEY}&language=en-US&page=1`;
const upcoming = `=${API_KEY}&language=en-US&page=1`;
//create an array of urls to fetch data from
const allMovieURLs = [trending, topRated, nowPlaying, upcoming];
const promiseURLs = allMovieURLs.map(url => fetch(url));
Promise.all(promiseURLs)
.then(responses => responses.map(url => url.json()))
.then(dataArr => console.log(dataArr));
};
I'm trying to get multiple data objects from The Movie Database at once using Promise.all
. After I loop through all the results of the fetch
call, and use .json()
on each bit of data, I tried to log it to the console. However, rather than an array of objects with data, I'm getting an array of Promises
. Nested in the promises, I can see my data, but I'm clearly missing a step in order to have an array of data objects, instead of just Promises
.
What am I missing here?
//store movie API URLs into meaningful variables
const trending = `https://api.themoviedb.org/3/trending/all/day?api_key=${API_KEY}`;
const topRated = `https://api.themoviedb.org/3/movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`;
const nowPlaying = `https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}&language=en-US&page=1`;
const upcoming = `https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`;
//create an array of urls to fetch data from
const allMovieURLs = [trending, topRated, nowPlaying, upcoming];
const promiseURLs = allMovieURLs.map(url => fetch(url));
Promise.all(promiseURLs)
.then(responses => responses.map(url => url.json()))
.then(dataArr => console.log(dataArr));
};
Share
Improve this question
asked Feb 24, 2019 at 9:15
WonkasWillyWonkasWilly
5731 gold badge8 silver badges23 bronze badges
3
|
2 Answers
Reset to default 19Your .then(responses => responses.map(url => url.json()))
resolves to an array of Promises, so you need to call Promise.all
again if you want to wait for all to resolve:
Promise.all(promiseURLs)
.then(responses => Promise.all(responses.map(url => url.json())))
.then(dataArr => console.log(dataArr));
Or, you might consider using just one Promise.all
, and having each URL fetch
and the json
, that way some items aren't idle in the middle of script execution:
const allMovieURLs = [trending, topRated, nowPlaying, upcoming];
const promiseURLs = allMovieURLs.map(url => fetch(url).then(res => res.json()));
Promise.all(promiseURLs)
.then(dataArr => console.log(dataArr));
try doing it this way
const promiseURLs = allMovieURLs.map(url => fetch(url).then(res => res.json()));
Promise.all(promiseURLs)
.then(responses => responses.forEach(response => { console.log(response)})
fetch
API) that I wrote it up on my anemic little blog. Check.ok
on the responses. 2. You're not handling rejection of yourPromise.all
promise, and not passing it to something that will handle it. You need to either handle it or pass the promise on to something that will. – T.J. Crowder Commented Feb 24, 2019 at 14:31