loop fetch in reactjs

Question

So basically i created a loop that takes values from an array and puts those values in a a loop using the youtube api . The youtube link works fine if I access it from within the loop, but outside the loop '(when i run the console.log({urllist})', i get an empty array.What I want to do is push all the values into the urllist empty array then transfer for them to the state variable('videos')

The function I am referring to is the videoUrls

class MusicCharter extends React.Component{
	constructor(){
    super();
    this.state= {
      data:[],
      videos:[],
		}
	}

	componentDidMount(){
  XHR.onreadystatechange = function(){
    if(XHR.readyState === 4 && XHR.status === 200) {
        var url = XHR.responseText;
        this.setState({data:(JSON.parse(url).tracks.track)})
    }
  }.bind(this)
  
  XHR.open("GET","http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=xxxxxxx&format=json");
  XHR.send();
}

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

Maxwelll · Accepted Answer · 2018-04-23 21:24:14Z

9

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

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

This prevents the for loop from incrementing until both the fetch and conversion of the response to json is complete

edited Apr 23, 2018 at 21:24

answered Apr 23, 2018 at 21:15

Maxwelll

2,2121 gold badge19 silver badges22 bronze badges

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

1 Comment

Udendu Abasili Over a year ago

i made a bit of modification but thanks lol. i didnt think of using that

Zohaib Ijaz · Accepted Answer · 2018-04-23 21:27:42Z

7

You can use Promise.all

videoUrls = () =>{
  const promises = this.state.data.map(item => {
    return fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      .then(response=> {
      return response.json()
    });
  });

  Promise.all(promises).then(results => {
    const videos = results.map(result => result.items[0]);
    console.log(videos);
    this.setState({videos});
  })
}

answered Apr 23, 2018 at 21:27

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

loop fetch in reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related