Last.fm API jQuery

Question

현재 내 사이트 www.midnightlisteners.com에 Last.fm API가 통합되어 있지만 마지막 Last.fm 데이터는 마지막 하나 인 Kanye West에 저장됩니다. (i) 아이콘 위로 마우스를 가져 가면 데이터가 툴팁에 표시됩니다.

나는 모두 반복하여 해당 위치에 추가하고 싶습니다. 누군가가 저에게 작은 아티스트 이미지를 줄 수 있다면 너무 좋을 것입니다.

내 jQuery 코드 :

내 HTML은 내 웹 사이트에 최선을 볼 수

$(document).ready(function() { 
     // Find Related Artists based on Last.fm JSON Results 
     $(".artist-data").each(function() { 
      // Find the artist name in the "p" tag and save it 
      artistName = $(this).find(".artist-wrap-mid p"); 
      artist = artistName.text(); 
      // Create a class out of the artist name made of lowercase letters and "-" instead of spaces 
      artistClass = artist.toLowerCase().replace(/ /g, '-'); 
      // Add this class to the .artist-data div 
      $(this).addClass(artistClass); 

      // Check if a value is present 
      if (artist === '') { 
       $("." + artistClass + " .related").html("No related artist info found for " + artist); 
      } 
      // Otherwise return the request with links to each related artist 
      else { 
       $.getJSON("http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=" + artist + "&api_key=9c991c10bf461ac4e4f92fdfa14c20c2&limit=3&format=json&callback=?", function(data) { 
        var html = ''; 
        $.each(data.similarartists.artist, function(i, item) { 
         html += "<a href='http://" + item.url + "' target='_blank'>" + item.name + "</a>, "; 
        }); // End each 
        $("." + artistClass + " .related").append(html); 
       }); // End getJSON  
      } // End Else 
     }); 
}); 

: www.midnightlisteners.com

그러나 내가 입수했습니다

<div class="related"> </div>에 Last.fm에서 모든 데이터를 두는 도움의 톤 : writing.sackettsolutions.com/2012/02/navigating-the-last-fm-api-with-a-little-help-from-jquery-getjson

Answer 1

이것은 일반적 문제입니다. 콜백과 함께 비동기 호출을 포함하는 루프에 관한 것입니다. 루프는 매우 빠르게 실행되며 $ .getJSON() 호출을 모두 빠르게 생성합니다. 콜백이 실행될 때까지 루프가 완료되었으므로 콜백의 클로우 징 범위에는 마지막 루프주기의 데이터에 대한 참조 만 포함됩니다.

솔루션 : 루프를 풀어주십시오. 이전 루프가 콜백을 마친 후에 만 ​​다음 루프 사이클을 시작하십시오. 따라서 고정 된 .each() 루프를 실행하는 대신 콜백 내에서 인덱스를 증가시키고 다음 루프주기를 "수동으로"시작해야합니다.

편집 2 : 코드 (! 안된)

var currIndex = 0; 
var $currArtists = $('.artist-data'); 

if($currArtists.length > 0) getNextArtistInfo(); 

function getNextArtistInfo() { 
    // get reference to current artist 
    var $currArtist = $currArtists.eq(currIndex); 
    artistName = $currArtist.find(".artist-wrap-mid p"); 
    artist = artistName.text(); 
    // Create a class out of the artist name made of lowercase letters and "-" instead of spaces 
    artistClass = artist.toLowerCase().replace(/ /g, '-'); 
    // Add this class to the .artist-data div 
    $currArtist.addClass(artistClass); 

    // Check if a value is present 
    if (artist === '') { 
      $("." + artistClass + " .related").html("No related artist info found for " + artist); 
      currIndex++; 
      if(currIndex < $currArtists.length) 
       getNextArtistInfo(); 
    } 
      // Otherwise return the request with links to each related artist 
    else { 
     $.getJSON("http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=" + artist + "&api_key=9c991c10bf461ac4e4f92fdfa14c20c2&limit=3&format=json&callback=?", function(data) { 
      var html = ''; 
      $.each(data.similarartists.artist, function(i, item) { 
       html += "<a href='http://" + item.url + "' target='_blank'>" + item.name + "</a>, "; 
      }); // End each 
      $("." + artistClass + " .related").append(html); 
      currIndex++; 
      if(currIndex < $currArtists.length) 
       getNextArtistInfo(); 
     }); 
    } 
}