1

現時点では、Last.fm API を自分のサイトwww.midnightlisteners.comに統合しましたが、Last.fm のすべてのデータを最後の Kanye West に置きます。( i ) アイコンにカーソルを合わせると、ツールヒントにデータが表示されます。

すべてをループして、対応する場所に追加したいと思います。さらに、誰かが小さなアーティストの画像も手に入れるのを手伝ってくれたら最高です.

私のjQueryコード:

$(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
      }); 
});

私の HTML は、私のウェブサイトwww.midnightlisteners.comで最もよく見られます。

しかし、Last.fm からのすべてのデータを<div class="related"> </div>

私はここでたくさんの助けを得ました: writing.sackettsolutions.com/2012/02/navigating-the-last-fm-api-with-a-little-help-from-jquery-getjson

4

1 に答える 1

3

これは一般的な問題です。コールバックを伴う非同期呼び出しを含むループについてです。ループは非常に高速に実行され、すべての $.getJSON() 呼び出しが非常に高速に作成されます。コールバックが実行されるまでに、ループは終了しているため、コールバックのクロージャ スコープには、最後のループ サイクルのデータへの参照のみが含まれます。

解決策: ループを緩めます...前のループ サイクルがコールバックを終了した後にのみ、次のループ サイクルを開始します。したがって、固定の .each() ループを実行する代わりに、コールバック内でインデックスをインクリメントし、次のループ サイクルを「手動で」開始する必要があります。

EDIT 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();
        });
    }
}
于 2012-09-04T08:33:57.563 に答える