Fetch API requesting multiple get requests

user_8207516 0
Viewed 97493

I would like to know how to fetch multiple GET URLs at once and then put the fetched JSON data into my React DOM element.

Here is my code:

fetch("http://localhost:3000/items/get")
.then(function(response){
        response.json().then(
            function(data){
                ReactDOM.render(
                    <Test items={data}/>,
                    document.getElementById('overview')
                );}
        );
    })
.catch(function(err){console.log(err);});

However, I would like to fetch additional JSON datas from my server and then render my ReactDOM with all these JSON datas passed into it. For example:

ReactDOM.render(
   <Test items={data} contactlist={data2} itemgroup={data3}/>,
   document.getElementById('overview')
);

Is this possible? If not, what are other solutions to fetching multiple JSON data into my rendering ReactDOM element?

reactjs fetch
5 Answers

I needed the json format response so I added a little bit of code myself 

Promise.all([
            fetch(url1).then(value => value.json()),
            fetch(url2).then(value => value.json())
            ])
            .then((value) => {
               console.log(value)
              //json response
            })
            .catch((err) => {
                console.log(err);
            });
user_62165300

Here is how i fetched multiple endpoints as an example which may help someone

 const findAnyName = async() => {
const urls = ['https://randomuser.me/api/', 'https://randomuser.me/api/'];
  try{
    let res = await Promise.all(urls.map(e => fetch(e)))
    let resJson = await Promise.all(res.map(e => e.json()))
    resJson = resJson.map(e => e.results[0].name.first)
    console.log(resJson)
  }catch(err) {
    console.log(err)
  }
}
findAnyName()

Here is a complete example you can check on JSFiddle

Or try this: declare all your URLs as an array. we will loop through this array and refer to single URL as array index.

     constructor(props) {
        super(props);
        this.state = { World: [], Afghanistan: [], USA: [], Australia: [] };
    }                                                                           
                       
 const urls = [
            'https://corona.lmao.ninja/v2/all',
            'https://corona.lmao.ninja/v2/countries/afghanistan',
            'https://corona.lmao.ninja/v2/countries/usa',
            'https://corona.lmao.ninja/v2/countries/australia'
        ];
    
    Promise.all(urls.map(url =>
                fetch(url)
                    .then(checkStatus)  // check the response of our APIs
                    .then(parseJSON)    // parse it to Json
                    .catch(error => console.log('There was a problem!', error))
            ))
                .then(data => {
                    // assign to requested URL as define in array with array index.
                    const data_world = data[0];
                    const data_af = data[1];
                    const data_usa = data[2];
                    const data_aus = data[3];
                    this.setState({
                                World: data_world,
                                Afghanistan: data_af,
                                USA: data_usa,
                                Australia: data_aus
                            })
                })
   function checkStatus(response) {
            if (response.ok) {
                return Promise.resolve(response);
            } else {
                return Promise.reject(new Error(response.statusText));
            }
        }

    function parseJSON(response) {
        return response.json();
    }

Result

const { World, Afghanistan, USA, Australia} = this.state;

        console.log(World, Afghanistan, USA, Australia)
user_82029740

You can do something like this, first .then right after fetch for both requests and then get the results in an array in the main .then

    Promise.all([
      fetch(
        "https://example.com/reviews/",
        requestOptionsDoc
      ).then((res1) => res1.json()),
      fetch(
        "https://example.com/reviews/",
        requestOptionsRel
      ).then((res2) => res2.json()),
    ])
      .then(([result1, result2]) => {
        if (result1.detail) {
          setDoctorReviewDetails("No review found.");
        } else {
          setDoctorReviewDetails(result1.data.comment);
        }
        if (result2.detail) {
          setRelativeReview("No review found.");
        } else {
          setRelativeReview(result2.data.comment);
        }
      })
      .catch((error) => console.log("error", error));
user_87066730
Related