Fetch with array and for loop

Question

I have around five URL(api) i need to fetch. I have made an array with the urls. I need to make a for loop so i can get each url-info into different boxes. I started earlier with fetch url, then i wrote down +info.name+ etc on each thing i wanted to get out at the page, but it will take to long time, so i need to use a for loop. How do i do that? So i dont have to fetch and write +info+ so many times?

var urls = ["url i need to fetch",
"url i need to fetch",
"url i need to fetch",];

var url = "url i wanted to fetch";

fetch (url)
.then (result => result.json())
.then ((res) => {
console.log(res);
createCards (res);

})
.catch(err => console.log(err))

function createCards(card) {
var div = document.getElementById('card');



div.innerHTML = `


<h2>`+card.name+`</h2>
      <div>
      <b>HTML text </b>`+info.from.card+`</div>

Have not used that before, so the best is if someone can help me with how Im gonna fetch it all with a for loop — KX0
– KX0, Commented Nov 15, 2018 at 15:24

Shilly · Accepted Answer · 2018-11-15 15:29:51Z

1

You can use Promise.all() to run all requests at the same time:

const urls = [
  "url i need to fetch",
  "url i need to fetch",
  "url i need to fetch"
];
Promise
  .all( urls.map( url => fetch( url)))
  .then( responses => responses.map( response => response.json()))
  .then( results => {
    // do something with the results array
  })
  .catch( error => {
    // handle the error
  });

answered Nov 15, 2018 at 15:29

Shilly

8,5991 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2018-11-15 15:34:35Z

1

You can use a for loop and use let which creates a block level scope

var urls = ["url1", "url2", "url3"];

for (let i = 0; i < urls.length; i++) {
  fetch(urls[i])
    .then(result => result.json())
    .then((res) => {
      console.log(res);
      createCards(res);
    })
    .catch(err => console.log(err))
}

function createCards(card) {
  var div = document.getElementById('card');
  div.innerHTML += `<h2>${card.name}</h2>
                  <div>
                  <b>HTML text </b>${someOtherText}</div>`
}

edited Nov 15, 2018 at 15:34

answered Nov 15, 2018 at 15:31

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

charlietfl Over a year ago

Should mention that the order of output may not be same as order of url array

Collectives™ on Stack Overflow

Fetch with array and for loop

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related