Question

尝试使用结果显示封面图样。 img src标记中的某些内容导致应用程序无法加载。如果我只是将img指向data.tracks [i] .album.name（显然不是真正的网址，但足以测试它是否正常工作）它会很好地粘贴它，但是当我将其更改为将网址粘贴到位，会使整个应用停止工作。

$('#findTracks').click(function (e) {
                e.preventDefault(); // override/don't submit form
                $('#recommendations').empty();
                var artist = $('#artist').val();
                var userid = "";
                var playlistid = "";

                $.ajax({
                    url: 'http://ws.spotify.com/search/1/track.json?q=' + artist,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.tracks.length > 0) {
                            var tracksLength = data.tracks.length, html = '';
                            for (var i=0; i<tracksLength; i++) {
                                var href = '';
                                if (data.tracks[i].album.availability.territories.indexOf(' GB ') !== -1) { // data.tracks[i].href
                                    href = data.tracks[i].href;
                                    href = 'makeReq(\''+data.tracks[i].name + ' by '+data.tracks[i].artists[0].name+'\')';
                                    html += '<li><a href="#" onclick="' + href + '">' +data.tracks[i].name + ' by '+data.tracks[i].artists[0].name+ ' <img src="' +data.tracks[i].album.images[0].url+ '" /></a>';html += '</li>';

                                    html += '</li>';
                                }
                            }
                            $('#third').css('display', 'block');
                            $('#recommendations').append(html);
                        } else {
                            $('#recommendations').append('<li>No matches returned.</li>');
                            $('#third').css('display', 'none');
                        }
                    },
                    error: function(err) {
                        alert("The Spotify API failed to return a response.");
                    }
                });                   
            });

这是我第一次使用javascript进行编码，所以请放心吧！洛尔

编辑：

这似乎运行良好！但是，当我点击它们时，许多歌曲都没有做任何事情

例如，键入＆＃34;不要停止＆＃34;只有＆＃34;黑眼豆豆 - 不要停止党＃34;在前十个工作中......任何人都知道为什么？

另外，任何人都知道为什么＆＃34; if（data.tracks [i] .album.availability.territories.indexOf（＆＃39; GB＆＃39;）！== -1）＆＃34;在那里？如果我把它拿出来，这一切都停止了......我不在G.B。

Answer 1

如果您在控制台中查看，则会收到错误

Uncaught TypeError: Cannot read property '0' of undefined

查看查询返回的数据，我们注意到data.tracks [i] .album返回

{
    "released": "2006",
    "href": "spotify:album:2knAf4wg8Gff8q1bXiXCTz",
    "name": "The Dutchess",
    "availability": {
        "territories": "MX"
    }
}

没有属性images所以当你打电话

时

data.tracks[i].album.images[0]

您收到未定义的错误，导致脚本暂停执行我不熟悉spootify api，但快速浏览一下get-album端点的api。这是我能够想出的专辑艺术

$.get("http://ws.spotify.com/search/1/track.json?q=Fergie",function(data){
   var albumId = data.tracks[97].album.href.split(":")[2];
   $.get("https://api.spotify.com/v1/albums/" + albumId,function(albumResponse){
       var firstImage = albumResponse.images[0];
       $('body').append($('<img/>',{
          src : firstImage.url,
          width : firstImage.width,
          height : firstImage.height
       }));
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

你应该更多地研究如何获得专辑封面，因为我不确定这是否是最佳解决方案。

您提到的search端点与您使用的端点不同。

   One your using
   url: 'http://ws.spotify.com/search/1/track.json?q=' + artist,
   One you linked to
   url: 'https://api.spotify.com/v1/search?q=' + artist + '&type=track,artist&market=GB',

通过更改端点来说明您的解决方案

$('#findTracks').click(function(e) {
  e.preventDefault(); // override/don't submit form
  $('#recommendations').empty();
  var artist = $('#artist').val();
  var userid = "";
  var playlistid = "";

  $.ajax({
    //url: 'http://ws.spotify.com/search/1/track.json?q=' + artist,
    url: 'https://api.spotify.com/v1/search?q=' + artist + '&type=track,artist&market=GB',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      if (data.tracks.items.length > 0) {
        data.tracks = data.tracks.items
        data.artists = data.artists.items
        var tracksLength = data.tracks.length,
          html = '';
        for (var i = 0; i < tracksLength; i++) {
          var href = '';
          href = data.tracks[i].href;
          href = 'makeReq(\'' + data.tracks[i].name + ' by ' + data.tracks[i].artists[0].name + '\')';
          html += '<li><a href="#" onclick="' + href + '">' + data.tracks[i].name + ' by ' + data.tracks[i].artists[0].name + ' <img src="' + data.tracks[i].album.images[0].url + '" /></a>';
          html += '</li>';
          html += '</li>';

        }
        $('#third').css('display', 'block');
        $('#recommendations').append(html);
      } else {
        $('#recommendations').append('<li>No matches returned.</li>');
        $('#third').css('display', 'none');
      }
    },
    error: function(err) {
      alert("The Spotify API failed to return a response.");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Artist:
<input type="text" id="artist" />
<button id="findTracks">Find Tracks</button>
<div id="recommendations"></div>

显示JSON中的图像

1 个答案: