jquery twitch 라이브 스트림 API 버그

Question

나는 트위치 사용자가 온라인 상태이고 자신의 이름을 클릭 할 수있게 해주는 트위터 페이지로 이동할 수있는 웹 응용 프로그램을 만들려고합니다. 자신의 트 위치 페이지에 URL 링크를 추가하는 것이 더 이상 작동하지 않으며 변경된 내용을 볼 수 없습니다. Ajax 호출하기 전에 변수가 아약스 호출 외부에서 정의되지 않도록

$(function(){ 
     users = ["ESL_SC2","OgamingSC2", "cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninja"]; 

     a = "https://api.twitch.tv/kraken/streams/" 
     b = "https://api.twitch.tv/kraken/channels/"; 
     for(i = 0; i<users.length; i++){ 
      $.getJSON(a + users[i], function(data) { 
       if(data.stream ==null){ 
        status = "offline"; 
        playing = ""; 
        } 
       else { 
        status = "online"; 
        playing = data.stream.game;  
       } 
      }); 

      x = b + users[i] 
      $.getJSON(x, function(result) { 
       displayName = result.display_name; 
       link= result.url; 
      }); 
      $("#list").append("<a href='" + link + "'><div class='block'> <h3 class='heading'>" + displayName + "</h3><p class='offline_status'>" + status + "</p><p>"+ playing + "</p></h3></div></a>"); 
     } 
    }) 

Answer 1

당신은, 변수를 선언하지 않는. 당신은 AJAX 요청을하고있는,하지만 그들은 비동기, 그래서 코드는 응답을 기다리지 않고 계속 :

$(function(){ 

    jQuery.ajaxSetup({async:false}); 

    var users = ["ESL_SC2","OgamingSC2", "cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninja"]; 

    a = "https://api.twitch.tv/kraken/streams/" 
    b = "https://api.twitch.tv/kraken/channels/"; 

    for(i = 0; i<users.length; i++){ 
     var displayName, status, playing, link; 
     jQuery.get(a + users[i]).done(function(data) { 
      if(data.stream == null){ 
       status = "offline"; 
       playing = ""; 
      } 
      else { 
       status = "online"; 
       playing = data.stream.game;  
      } 

     }); 
     jQuery.get(b + users[i]).done(function(result) { 
      displayName = result.display_name; 
      link= result.url; 
      $("#list").append("<a href='" + link + "'><div class='block'> <h3 class='heading'>" + displayName + "</h3><p class='offline_status'>" + status + "</p><p>"+ playing + "</p></div></a>"); 
     }); 
    } 
}); 

편집 :

이보십시오. 이 문제를 해결하기 위해 처음에는 동기화 요청을 원했습니다. 요청이 잘 실행되고 데이터가 사용 가능한지 확인하기 위해 .done()을 사용하여 거기에 함수를 넣습니다. 나는 당신이 당신의 실수 중 일부를 이해하기를 바랍니다 :) (나는 나의 것을 배웠다.)

JSFiddle : https://jsfiddle.net/vp8s99L2/