Promise.all returning empty objects
Clash Royale CLAN TAG#URR8PPP
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));
};
javascript
add a comment |
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));
};
javascript
3
It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in thefetch
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
Feb 24 at 14:31
closely related: Why does .json() return a promise?
– Bergi
Feb 24 at 15:19
1
@T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated!
– WonkasWilly
Feb 25 at 6:47
add a comment |
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));
};
javascript
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));
};
javascript
javascript
asked Feb 24 at 9:15
WonkasWillyWonkasWilly
253211
253211
3
It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in thefetch
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
Feb 24 at 14:31
closely related: Why does .json() return a promise?
– Bergi
Feb 24 at 15:19
1
@T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated!
– WonkasWilly
Feb 25 at 6:47
add a comment |
3
It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in thefetch
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
Feb 24 at 14:31
closely related: Why does .json() return a promise?
– Bergi
Feb 24 at 15:19
1
@T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated!
– WonkasWilly
Feb 25 at 6:47
3
3
It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in the
fetch
API) that I wrote it up on my anemic little blog. Check .ok
on the responses. 2. You're not handling rejection of your Promise.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
Feb 24 at 14:31
It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in the
fetch
API) that I wrote it up on my anemic little blog. Check .ok
on the responses. 2. You're not handling rejection of your Promise.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
Feb 24 at 14:31
closely related: Why does .json() return a promise?
– Bergi
Feb 24 at 15:19
closely related: Why does .json() return a promise?
– Bergi
Feb 24 at 15:19
1
1
@T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated!
– WonkasWilly
Feb 25 at 6:47
@T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated!
– WonkasWilly
Feb 25 at 6:47
add a comment |
2 Answers
2
active
oldest
votes
Your .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));
I didn't realize thatBody.json
also returned aPromise
! Your explanation was simple and concise, and this has solved my problem. Thank you.
– WonkasWilly
Feb 24 at 9:33
1
Probably worth pointing out the missing.ok
check (I've done so now in a comment on the question).
– T.J. Crowder
Feb 24 at 14:32
add a comment |
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))
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54850431%2fpromise-all-returning-empty-objects%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your .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));
I didn't realize thatBody.json
also returned aPromise
! Your explanation was simple and concise, and this has solved my problem. Thank you.
– WonkasWilly
Feb 24 at 9:33
1
Probably worth pointing out the missing.ok
check (I've done so now in a comment on the question).
– T.J. Crowder
Feb 24 at 14:32
add a comment |
Your .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));
I didn't realize thatBody.json
also returned aPromise
! Your explanation was simple and concise, and this has solved my problem. Thank you.
– WonkasWilly
Feb 24 at 9:33
1
Probably worth pointing out the missing.ok
check (I've done so now in a comment on the question).
– T.J. Crowder
Feb 24 at 14:32
add a comment |
Your .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));
Your .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));
answered Feb 24 at 9:17
CertainPerformanceCertainPerformance
94.6k165685
94.6k165685
I didn't realize thatBody.json
also returned aPromise
! Your explanation was simple and concise, and this has solved my problem. Thank you.
– WonkasWilly
Feb 24 at 9:33
1
Probably worth pointing out the missing.ok
check (I've done so now in a comment on the question).
– T.J. Crowder
Feb 24 at 14:32
add a comment |
I didn't realize thatBody.json
also returned aPromise
! Your explanation was simple and concise, and this has solved my problem. Thank you.
– WonkasWilly
Feb 24 at 9:33
1
Probably worth pointing out the missing.ok
check (I've done so now in a comment on the question).
– T.J. Crowder
Feb 24 at 14:32
I didn't realize that
Body.json
also returned a Promise
! Your explanation was simple and concise, and this has solved my problem. Thank you.– WonkasWilly
Feb 24 at 9:33
I didn't realize that
Body.json
also returned a Promise
! Your explanation was simple and concise, and this has solved my problem. Thank you.– WonkasWilly
Feb 24 at 9:33
1
1
Probably worth pointing out the missing
.ok
check (I've done so now in a comment on the question).– T.J. Crowder
Feb 24 at 14:32
Probably worth pointing out the missing
.ok
check (I've done so now in a comment on the question).– T.J. Crowder
Feb 24 at 14:32
add a comment |
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))
add a comment |
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))
add a comment |
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))
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))
answered Feb 24 at 9:20
George.SGeorge.S
1166
1166
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54850431%2fpromise-all-returning-empty-objects%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in the
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
Feb 24 at 14:31
closely related: Why does .json() return a promise?
– Bergi
Feb 24 at 15:19
1
@T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated!
– WonkasWilly
Feb 25 at 6:47