Can't get multiple data from API using foreach loop with Fetch API get request

Question

In my project, I need to get organization data's from api firstly, then ı need to get another specific data's from another api with sending as a parameter organizationEIC property of my organization data which ı get in first request. I can get the organization datas successfully and set them to items state successfully. But when ı came to the second API request which made in getPlants() method, my program and my RAM fail and ı get net::ERR_INSUFFICIENT_RESOURCES error for each request. I just put the incoming data to the datas array in order not to setState every time and to prevent the component from rendering again, but the program still crashes. I got some solutions with using hooks but I'm beginner in react and ı don't have any knowledge about hooks and want to solve this issue with basic react to develop myself better.

state = {
    items: [],

    plants: []
  } 

componentDidMount() {
    fetch('https://cors-anywhere.herokuapp.com/https://seffaflik.epias.com.tr/transparency/service/production/dpp-organization', {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(response =>
        response.json())
      .then(resultJson => {
        this.setState({
          items: resultJson.body.organizations,      //can get successfully and set state items ok.
        })
        
      });
  }

getPlants = () =>{
    this.state.items.forEach((plant) => {            //foreach loop with using items state
      fetch(`https://cors-anywhere.herokuapp.com/https://seffaflik.epias.com.tr/transparency/service/production/dpp-injection-unit-name?organizationEIC=${plant.organizationETSOCode}`, {
        method: 'GET',
        headers: {
          "Content-Type": "application/json",
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
        .then(response => response.json())
        .then(resultJson => {
          datas.push(resultJson.body.injectionUnitNames)     //where ı fail
        })
    })
  }

  render() {
    this.getPlants()           //just necessery part of render method
    console.log(datas)

THX in advance for your help and suggestions

forEach method isn't the right method to use inside the getPlants function - either use for of loop or better, use Promise.all as shown in the answer below. — Yousaf
– Yousaf, Commented May 9, 2021 at 12:13

Someone Special · Accepted Answer · 2021-05-09 13:07:01Z

1

(1) This probably happened because you are calling .getPlants() on every render. You should probably call getPlants inside componentDidMount instead.

(2) You may use promise.all to speed up your fetch.

getPlants = async (items) =>{

const data = await Promise.all( items.map((plant) => {
     return fetch(`https://cors-anywhere.herokuapp.com/https://seffaflik.epias.com.tr/transparency/service/production/dpp-injection-unit-name?organizationEIC=${plant.organizationETSOCode}`, {
    method: 'GET',
    headers: {
      "Content-Type": "application/json",
      'X-Requested-With': 'XMLHttpRequest'
    }
  }).then(response => response.json())
}))

this.setState({ data })
}

ComponentDidMount

componentDidMount() {
    fetch('https://cors-anywhere.herokuapp.com/https://seffaflik.epias.com.tr/transparency/service/production/dpp-organization', {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(response =>
        response.json())
      .then(async resultJson => {
        this.setState({
          items: resultJson.body.organizations,      //can get successfully and set state items ok.
        })
        await getPlants(resultJson.body.organizations) // we call get plants here
        
      });
  }

edited May 9, 2021 at 13:07

answered May 9, 2021 at 12:07

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

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

19 Comments

Yousaf Over a year ago

map(async(plant) - making the callback function of map method is unnecessary

Someone Special Over a year ago

you are correct. initially i wanted to use await but decided to return the fetch response instead.

Someone Special Over a year ago

you want to save the results in this.state.plants? then u change this.setState({data}) to this.setState({ plants: data })

Someone Special Over a year ago

what you mean cannot get any data in plants state. can you do console.log(data) or put console.log in your fetch statements to debug whether your fetch url is working?

alperenoz Over a year ago

I made the same exact code with your comment but removed the await and call it in ComponentDidMounth, errors not dissapearing but cant get any response in my state. İt looks like its not sending requests @SomeoneSpecial

|

Collectives™ on Stack Overflow

Can't get multiple data from API using foreach loop with Fetch API get request

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related