Why JavaScript Promise.all is not resolving the promises

Question

I have the following code which fetches news from different news urls;

function displayNews() {

    Promise.all([fetch(BUSINESS_NEWS_URL), fetch(APPLE_NEWS_URL)])
    .then(responses => {
        return responses.map(response => response.json())
    }).then((data) => console.log(data)) // this still prints [Promise]
}

For some reason I am getting [Promise] getting displayed instead of the actual data. What am I missing?

Answer 1

json() returns a promise so it would be another Promise.all

Promise.all([fetch(u1), fetch(u2)])
    .then(responses => {
        return Promise.all(responses.map(response => response.json()))
    }).then((data) => console.log(data))

Most people would not use two promise alls. They would return JSON with the fetch call

const grabJSON = url => fetch(url).then(x => x.json())
const calls = ['url1', 'url2'].map(grabJSON)
Promise.all(calls)
  .then((data) => console.log(data))

Answer 2

json is an async method. Try something like this:

function displayNews() {

    Promise.all([fetch(BUSINESS_NEWS_URL), fetch(APPLE_NEWS_URL)])
   .then(responses => {
        return Promise.all(responses.map(response => response.json()))
    }) 
   .then(responses => {
        return responses.map(data => console.log(data))
    })
}