2016-08-25 4 views
0

Hey Guys im new при кодировании и работе прямо сейчас на Twitch Viewer. (FreeCodeCamp)Почему мой цикл for не работает в моей функции JSON?

Im способна получить информацию из файла JSON и показать ее через мой html-код. Но моя проблема в том, что я не могу получить имена из моего массива «gamer».

Почему цикл for не работает в функции json?

Большое вам спасибо за помощь!

var gamer = ["OgamingSC2","ESL_SC2"]; 
 

 
for(i=0;i<(2);i++){ 
 
    
 
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[i]+'/?callback=?', function(json) { 
 
    $('.list').append("<b>Name: " + gamer[i] + "</b><br>"); 
 
    var logo = json.stream.channel.logo; 
 
    
 
    $('.list').append("Game: " + json.stream.channel.game + "<br>"); 
 
    $('.list').append("Status: " + json.stream.channel.status + "<br>"); 
 
    $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>"); 
 
    console.log(json); 
 
});}
img { 
 
    width: 5em; 
 
    border-radius: 10px; 
 
}
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head> 
 
<body> 
 
    <b>Twitch.tv JSON API</b> </br> 
 
<div class="list"></div> 
 
</body>

+0

использование 'геймер [я] .name' –

+0

, потому что' $ .json' является асинхронным, и 'i' не то, что вы думаете, когда вы попали в' $ .json' callback ... @AJ 'i' все равно будет не так: p –

+0

@JaromandaX: Да, я пропустил это. * неловко * –

ответ

0

Что здесь происходит это $.getJson асинхронный вызов, который означает, что он будет выполнять только после того, как все операции синхронизации выполняются. Таким образом, цикл for выполняется дважды, и в стек функций добавляются две функции обратного вызова getJSON.

Теперь, как Javascript имеет лексический или функциональный объем, переменная i живет в глобальном масштабе, как 2 (как окончательный i++ также выполнили).

Далее функции обратного вызова выполняются один за другим из стека функций. Но, увы, ваша переменная i теперь 2! Теперь функции обратного вызова будет видеть только gamer[2], который не существует, и это бросает undefined

Если добавить console.log(i) к вашему $ .getJSON, вы увидите, что он выводит только 2 два раза.

Почему бы вам не попробовать это:

var gamer = ["OgamingSC2","ESL_SC2"]; 
 
    gamer.map(function(gamer) { 
 
     loopIt(gamer); 
 
    }); 
 

 
    function loopIt(gamer) { 
 
    
 
    
 
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer+'/?callback=?', function(json) { 
 
     $('.list').append("<b>Name: " + gamer + "</b><br>"); 
 
     var logo = json.stream.channel.logo; 
 
     
 
     $('.list').append("Game: " + json.stream.channel.game + "<br>"); 
 
     $('.list').append("Status: " + json.stream.channel.status + "<br>"); 
 
     $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>"); 
 
    }); 
 

 
} 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head> 
 
<body> 
 
    <b>Twitch.tv JSON API</b> </br> 
 
<div class="list"></div> 
 
</body>

+0

Спасибо за ваше очень глубокое объяснение! Теперь я понимаю, что происходит! Большое спасибо!!! – aisen

0

я думаю, что это JSON ничего не дает, потому что вы положили callback=? , когда вы проходите? в переменной обратного вызова это значение имеет значение? и ничего не дает. так просто положите callback= .dont дать любые значения и повторите попытку. и просто активировать функцию json в функции. вы будете знать, что значение приближается или нет. Я не нашел ничего плохого в ссылке loop и json.

0

Для этого типа вызова вызова для цикла вы можете использовать настраиваемый цикл.

Подобно этому, https://jsfiddle.net/s8eLhxpx/

var gamer = ["OgamingSC2","ESL_SC2"]; 

    var initCounter = 0; 
    callServerData() 

    function callServerData(){ 
     $.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[ initCounter ]+'/?callback=?', function(json) { 
    $('.list').append("<b>Name: " + gamer[ initCounter ] + "</b><br>"); 
    var logo = json.stream.channel.logo; 

    $('.list').append("Game: " + json.stream.channel.game + "<br>"); 
    $('.list').append("Status: " + json.stream.channel.status + "<br>"); 
    $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>"); 
     console.log(json); 
     initCounter++ 
     if(initCounter < gamer.length){ 

     callServerData(); 
    } 

}); 
} 
+0

Большое спасибо, что мне очень помогло! – aisen

+0

для цикла не дожидайтесь ответа сервера, поэтому вы получите неопределенный. –

Смежные вопросы