Last.fm API jQuery

Question

目前我在我的网站www.midnightlisteners.com上集成了Last.fm API，但它将所有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

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