Breaking News: Grepper is joining You.com. Read the official announcement!

react fetch data in for loop

sirG answered on January 12, 2021 Popularity 8/10 Helpfulness 2/10

answer react fetch data in for loop

react fetch data in for loop

Comment

/*
ORIGINAL CODE
*/

videoUrls=()=>{
  let i=0;
  let urllist=[]
  for(i;i< this.state.data.length;i++){
      fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      .then(response=> {
        return response.json()
    })
     .then(data=>{
        return(urllist.push(data.items[0]))
      })
   }
   console.log({urllist})
}

/*
Your for loop does not iterate asynchronously but you can get around 
this by putting your for loop inside an async function Asynchronous 
Process inside a javascript for loop and awaiting the result of the 
asynchronous operations
*/

/*
New code
*/

videoUrls = async () => {
  let i=0;
  let urllist=[]
  for(i;i< this.state.data.length;i++){
      const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      const json = await response.json()
      urllist.push(json.items[0])
      console.log({urllist})
    }
 }

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: fetch for-loop javascript

Link to this answer
Share Copy Link

Contributed on Jan 12 2021

sirG

0 Answers Avg Quality 2/10

react fetch data in for loop

Contents

More Related Answers

react fetch data in for loop

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.