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: stackoverflow.com/a/31711496/2610061 — Carsten Massmann
– Carsten Massmann, Commented Apr 11, 2021 at 5:35

gencalda · Accepted Answer · 2021-04-11 09:17:17Z

// 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": "[email protected]",
        "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": "[email protected]",
        "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": "[email protected]",
        "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 · Accepted Answer · 2021-04-11 05:52:58Z

1

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.

edited Apr 11, 2021 at 5:52

answered Apr 11, 2021 at 5:46

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

loading Mutiple URLS JSON using fetch in React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related