/Javascript/React/React fetch data in for loop

React fetch data in for loop

/*
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})
    }
 }

Source: stackoverflow.com

Similar codes

0 vote327 views1 answer
Only numbers or string. Input field in React
Javascript React
27 votes388 views4 answers
Font awesome react npm
Javascript React
0 vote378 views1 answer
React-native-charts-wrapper:compileDebugJavaWithJavac FAILED
Javascript React
10 votes289 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
1 vote318 views5 answers
React date picker
Javascript React
0 vote341 views2 answers
Background transparent react native
Javascript React
0 vote323 views2 answers
Hosting react on gh pages
Javascript React
2 votes316 views1 answer
Make page refresh on top in react js
Javascript React
0 vote348 views1 answer
Reactjs ES6 class event listeners in jsx
Javascript React
21 votes305 views6 answers
React native apk build
Javascript React