Search
showing results for - "react fetch data in for loop"
Stéphane
18 Aug 2017
1/*
2ORIGINAL CODE
3*/
4
5videoUrls=()=>{
6  let i=0;
7  let urllist=[]
8  for(i;i< this.state.data.length;i++){
9      fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
10      .then(response=> {
11        return response.json()
12    })
13     .then(data=>{
14        return(urllist.push(data.items[0]))
15      })
16   }
17   console.log({urllist})
18}
19
20/*
21Your for loop does not iterate asynchronously but you can get around 
22this by putting your for loop inside an async function Asynchronous 
23Process inside a javascript for loop and awaiting the result of the 
24asynchronous operations
25*/
26
27/*
28New code
29*/
30
31videoUrls = async () => {
32  let i=0;
33  let urllist=[]
34  for(i;i< this.state.data.length;i++){
35      const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
36      const json = await response.json()
37      urllist.push(json.items[0])
38      console.log({urllist})
39    }
40 }
41
source
similar questions
react native set variable key in loopcreate loop to specific length reactrender text in for loop react in functiondynamic for loop reactreact native jsx loop with numberloop number in reactreact for loop in renderloop with react and react nativefor loop in react nativereactjs loop through api response in reactreact async loopcode in nested foreach loop react nativereact js iterate objectreact loopreact native loop in renderfor loop value index reactreturn jsx in for loop
queries leading to this page
fetching loop reactreact loop a fetch callreact fetch loopfetch data and loop in jsxreact loop fetched datahow to fetch limited data records from a loopback server to in my react js componentreact infinite loop when fetching datareact loop data from apifetch loop react infinite loopreact apihow to fetch without loopfetch is happening in loop reacthow to write a for loop in fetch request reactreact fetch loop inifnitefetch data using foreach loop in react nativereact fetch data without using mao or loopreact api how to fetch without loopinfinite loop in react when fetch datafetch and display data in react loopreact loop fetshed datafetch data using foreach loop in react jsreact fetch infinite loopreact fetch goes into infinite loopfetch data using foreach loop in reactfetch data loop in react nativereact fetch data in for loopfetchdata in loop reactreact fetch data in for loop