Array of urls with Promise.all?

Question

I have a problem with using fetchs, I have an array of urls that have a JSON content, I want to get the data from all these JSON's and display them in html.

With 1 url I get the result I want:

fetch('myurl1')
.then(response => response.json())
.then(data => {
  let element = document.querySelector('.ele');
  element.innerHTML = `<p>${data.title}</p>`
})
.catch(err => console.log(err))

But when I have several urls I do not know what to do, I want to display the title that it has in all these json files, how do?

Promise.all(urlsArray.map(url =>
  fetch(url)))
  .then(responses => {
    responses.forEach(response => {
      response.json();
      
      let element = document.querySelector('.ele');
      element.innerHTML = `<p>${?????.title}</p>`
    })
  })
  .catch(err => console.log(err))

This is the way I was trying, I do not know how.

PS: .ele is a div

Answer 1

Collect all the results and then render them in whichever HTML form you like e.g.

Promise.all(urls.map(x => fetch(x))
  .then(async responses => {
    const results = await Promise.all(responses.map(x => x.json()));
    const html = results.map(x => `<li>${x.title}</li>`);
    let element = document.querySelector('.ele');
    element.innerHTML = `<ul>${html.join('')}</ul>`;
  })
  .catch(err => console.log(err))

This would result in:

<div class="ele">
  <li>Title A</li>
  <li>Title B</li>
  ...
</div>

Answer 2

You can do the same thing as before, using map on the responses to create an array of Promises that resolve to the parsed json data:

Promise.all( urlsArray.map(url =>fetch(url)) )
  .then(responses => {
    return Promise.all(responses.map(response => response.json()))
  })
  .then(dataArray => {
    dataArray.forEach(data => {
      let element = document.querySelector('.ele');
      element.innerHTML = `<p>${data.title}</p>`
    })
  })
  .catch(err => console.log(err))

Answer 3

I'd suggest putting all your URLs inside an array and then do a forEach on them one by one and run your methods easily. This won't guarantee an order but will for sure. Don't forget to handle errors

// define our fetch function here just for an example
let fetch = (url) => new Promise(res => setTimeout(() => res(url + " is Fetched"),1000))

let urls = ['url1', 'url2', 'url3'] // all your urls in an array
urls.forEach(url => { // for every url inside the array
  fetch(url) // fetch the url
    .then(data => { // then append them to the document
      var node = document.createElement("LI");
      var textnode = document.createTextNode(data);
      node.appendChild(textnode);
      document.getElementsByTagName("body")[0].appendChild(node)
    })
})