loading Mutiple URLS JSON using fetch in React

Question

I am attempting to fetch multiples URLs in React.js using the Promise.all() method, how can I do that?

So I got this code from another stack forum. And I need to take inside all urls list, like json, and pass to an state called "SetBusStop":

const requests = urls.map(url => 
fetch(url).then(res => res.json()));
 const toBus = responses => 
 responses.map(response => response);
  Promise.all(requests).then(toBus)
 .then(positions => {setBusStop(positions));

And these are the const urls links:

   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=8",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=9",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=3",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=7",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=1",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=2",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=10"
  ]; ```

I'm so stuck, thanks.

Maybe this can help you: https://stackoverflow.com/a/31711496/2610061 — Carsten Massmann, Apr 11 '21 at 05:35

gencalda · Answer 1 · 2021-04-11T09:17:17.097

// Example urls
 const urls = [
  "https://jsonplaceholder.typicode.com/users/1",
  "https://jsonplaceholder.typicode.com/users/2",
  "https://jsonplaceholder.typicode.com/users/3",
];

const requests = urls.map((url) => fetch(url))

Promise.all(requests)
  .then((responses) => {  // Array of response object
    return Promise.all(responses.map(response => response.json()))  // converting response to json
  })
  .then((responsesData) => {  // actual array of data returned from response.json()
    setBusStop(responsesData)
  })


Result:
[
    {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": { "lat": "-37.3159", "lng": "81.1496" }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
        }
    },
    {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "Shanna@melissa.tv",
        "address": {
        "street": "Victor Plains",
        "suite": "Suite 879",
        "city": "Wisokyburgh",
        "zipcode": "90566-7771",
        "geo": { "lat": "-43.9509", "lng": "-34.4618" }
        },
        "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
        "company": {
        "name": "Deckow-Crist",
        "catchPhrase": "Proactive didactic contingency",
        "bs": "synergize scalable supply-chains"
        }
    },
    {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "Nathan@yesenia.net",
        "address": {
        "street": "Douglas Extension",
        "suite": "Suite 847",
        "city": "McKenziehaven",
        "zipcode": "59590-4157",
        "geo": { "lat": "-68.6102", "lng": "-47.0653" }
        },
        "phone": "1-463-123-4447",
        "website": "ramiro.info",
        "company": {
        "name": "Romaguera-Jacobson",
        "catchPhrase": "Face to face bifurcated interface",
        "bs": "e-enable strategic applications"
        }
    }
]

Carsten Massmann · Answer 2 · 2021-04-11T05:52:58.630

Here is a working snippet with a different URL, as I do not have authorisation to use yours. Maybe this can be helpful to you?

Promise.all(
  [1,2,3,7,8,9,10]
  .map(                   // collate an array of promises here ...
    i=>fetch('https://jsonplaceholder.typicode.com/users/'+i)
       .then(r=>r.json()) // set each promise to deliver a json
  )
).then(users=>console.log(users.map(u=>u.id+' '+u.name))); // process all results

Please keep in mind that Promise.all() will "fail fast", i. e. it will reject the whole promise as soon as one rejection within the array of promises has been received.

loading Mutiple URLS JSON using fetch in React

2 Answers2