顯示JSON的圖像

試圖顯示封面藝術和結果。 img src標記中的某些內容導致應用程序無法加載。如果我只是將img指向data.tracks [i] .album.name（顯然不是一個真正的url，但足以測試它是否正常工作），它將它粘貼得很好，但是當我更改它以將url粘貼到地方，它使整個應用程序停止工作。顯示JSON的圖像

$('#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編碼，所以請在我身上輕鬆一下！大聲笑

編輯：

這似乎運行良好！但是，當我點擊它們時，許多歌曲什麼都不做，例如，鍵入「不要停止」，只有「黑眼豆豆 - 不要停止派對」。任何人都知道爲什麼？

另外，任何人都知道爲什麼「如果（data.tracks [i] .album.availability.territories.indexOf（'GB'）！== -1）」在那裏？如果我把它拿出來，這一切都停止工作......我不在G.B.

來源

2015-02-10 Timothy Richard Elliott

改變您的解決方案，你看HTML？ img src說什麼？ – pennstatephil 2015-02-10 18:25:22

如果您在控制檯中尋找你所得到的錯誤

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，但快速瀏覽了api theres終點的get-album。下面有什麼我能拿出拿到專輯封面

$.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>

來源

2015-02-10 18:34:38

這很奇怪，它應該是獲取圖像 https://developer.spotify.com/web-api/console/get-search-item/#complete – 2015-02-10 18:42:49

@TimothyRichardElliot我已經添加了一個關於您鏈接的API的編輯到 – 2015-02-10 19:11:14

我的下一個問題是如何讓它發送到我的電子郵件......我最初創建了一個腳本，將直接請求的歌曲發送到我的Spotify帳戶上的「請求」播放列表，但後來我意識到這需要oauth。 ..現在我試圖通過PHP傳遞給我的電子郵件 – 2015-02-11 01:04:04

顯示JSON的圖像

回答

相關問題