다중 JSON 요청 반복 (YouTube 데이터 API)

Question

내가 작업하고있는 웹 사이트의 일부는 비디오 페이지입니다. YouTube Data API에 액세스하여 YouTube 계정에서 동영상을 가져옵니다. 특별한 순서가 아니고 정렬되지 않은 비디오를 잡는 것은 잘 작동하지만, 카테고리로 정렬하려고하면 문제가 생기기 시작합니다. 과일, 야채, 애완 동물이라는 세 가지 카테고리가 있다고 가정 해 보겠습니다. 한 번에 모든 비디오를 포착하는 대신 Fruit으로 태그 된 모든 비디오를 가져 와서 <ul id="Fruit">에 추가하고 싶습니다. 그런 다음 야채 등으로 태그 된 모든 동영상을 요청하십시오.

시작하면 요청이 끝나고 적절한 목록을 추가하면 브라우저에 경고 메시지가 표시됩니다. 경고를 받으면 나는 여전히 효과가 있었지만 기대했던 것과는 다르다. 루프가 너무 빨리 진행되거나 전혀 진행되지 않지만 실수를 발견 할 수는 없습니다. 무슨 일이 일어나는지는 모든 동영상이 하나의 목록 인 <ul id="Vegetable">에 저장된다는 것입니다.

참고 : 저는 jQuery getJSON 함수를 감싸는 jGFeed라는 플러그인을 사용하고 있습니다. 그래서 당신이 그걸 취급 할 수 있다고 생각합니다.

var videoCategories = ['Fruit', 'Vegetable', 'Pets']; 

for (var i = 0; i < videoCategories.length; i++) { 
    var thisCategory = videoCategories[i]; 
    $.jGFeed('http://gdata.youtube.com/feeds/api/users/username/uploads?category='+thisCategory, 
    //Do something with the returned data 
    function(feeds) { 
     // Check for errors 
     if(!feeds) { 
     return false; 
     } else { 
     for(var j=0; j < feeds.entries.length(); j++) { 
      var entry = feeds.entries[i]; 
      var videoUrl = entry.link; 
      $('ul#'+thisCategory).append('<li><a href="#" id="'+videoUrl+'">'+entry.title+'</a></li>'); 
     } 
     }); 
} 

Answer 1

문제는 'thisCategory'- 변수를 사용하여 카테고리 이름을 설정하는 것입니다. 문제는 서버에서 응답을 기다리는 동안이 변수가 변경되면 값입니다.

당신은 함수 내에서 전체 스크립트를 넣어 시도 할 수 :

var videoCategories = ['Fruit', 'Vegetable', 'Pets']; 

for (var i = 0; i < videoCategories.length; i++) { 
    getCategory(videoCategories[i]); 
} 

function getCategory(thisCategory) 
{ 

    $.jGFeed('http://gdata.youtube.com/feeds/api/users/username/uploads?category='+thisCategory, 
    //Do something with the returned data 
    function(feeds) { 
     // Check for errors 
     if(!feeds) { 
     return false; 
     } else { 
     for(var j=0; j < feeds.entries.length(); j++) { 
      var entry = feeds.entries[i]; 
      var videoUrl = entry.link; 
      $('ul#'+thisCategory).append('<li><a href="#" id="'+videoUrl+'">'+entry.title+'</a></li>'); 
     } 
     }); 
} 

나는이 테스트를하지 않은, 그래서 작동하는지 잘 모르겠어요 ..