angular 2 for i= always 20 help me guys whats wrong here?

Question

you can see here my code its this console.log(parti+" "+ i); i always return 20 whats wrong my code just say it to me ı cant see please . thanks.

        for(var i=0;i<=20;i++){
          this.http.get("https://tr1.api.riotgames.com/lol/match/v3/matches/"+data.matches[i].gameId+"?api_key="+this.apikey).map(res=> res.json()).subscribe(data => {
for(var c=0;c<=9;c++){
  if  (data.participantIdentities[c].player.summonerName.toUpperCase().replace(/\s/g, '')==ev.toUpperCase().replace(/\s/g, '')){
    var parti=data.participantIdentities[c].participantId;
console.log(parti+" "+ i);

console.log(data.participants[parti-1].stats.win)

this.virtual.push({gameid: this.matches[i].gameId , champion: this.matches[i].champion,time : this.matches[i].timestamp,win:data.participants[parti-1].stats.win}) ;

}
  
}
console.log(data);

  });
        }

Answer 1

When data from the GET calls arrive, your callback functions will be called. This, however, is after your code (including the loop) has run, so the value of i is 20. The simplest way to solve this is to call a separate function from your outer loop and pass in the current index. The function will capture that value as parameter which will be in scope when your callback is being run.

I.e.

for(var i=0;i<=20;i++) {
    getData(i);
 }

function getData(i) {
  this.http.get("https://tr1.api.riotgames.com/lol/match/v3/matches/"+data.matches[i].gameId+"?api_key="+this.apikey).map(res=> res.json()).subscribe(data => {
for(var c=0;c<=9;c++){
  if  (data.participantIdentities[c].player.summonerName.toUpperCase().replace(/\s/g, '')==ev.toUpperCase().replace(/\s/g, '')){
    var parti=data.participantIdentities[c].participantId;
console.log(parti+" "+ i);

console.log(data.participants[parti-1].stats.win)

this.virtual.push({gameid: this.matches[i].gameId , champion: this.matches[i].champion,time : this.matches[i].timestamp,win:data.participants[parti-1].stats.win}) ;

}
}

Something like that.