使用並不總是存在的JSON屬性。使用jquery

Question

我正在寫一個簡短的腳本，連接到LastFM api來獲取我最後一首scrobbled歌曲。我遇到的問題是JSON版本有一個屬於「正在播放」的屬性，當你正在收聽一首歌曲時，它的值爲「true」。但是，如果沒有播放歌曲，則該屬性根本不存在。

這是我現在使用的腳本，當我通過spotify或iTunes等收聽歌曲時，它可以正常工作。

<p> 
<p class="nowplaying"> <span class="track"></span> by <span class="artist"></span></p> 
<p> 
<script type="text/javascript"> 
$.getJSON('https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=JamesTaylor87&api_key=ADD-API-KEY-HERE&format=json', function(data) { 

var artist = $(".artist"), 
track = $(".track"), 
np = $(".nowplaying"), 
artistVal = data.recenttracks.track[0].artist["#text"], 
trackVal = data.recenttracks.track[0].name, 
nowplaying = data.recenttracks.track[0]["@attr"].nowplaying; 

if(typeof nowplaying === "undefined"){ 
np.prepend("The last song I listened to was") 
artist.append(artistVal); 
track.append(trackVal); 
} else { 
np.prepend("I am currently listening to") 
artist.append(artistVal); 
track.append(trackVal); 
} 

}); 
</script> 

然而，當我不聽任何東西，我得到以下錯誤信息（在Safari瀏覽器），並沒有什麼作品：

undefined is not an object (evaluating 'data.recenttracks.track[0]["@attr"].nowplaying') 

鉻錯誤顯示如下：

Uncaught TypeError: Cannot read property 'nowplaying' of undefined 

我試圖使用一個if語句，當它未定義，但沒有工作，並不真正知道還有什麼要嘗試。任何幫助將非常感激。

Answer 1

更換

data.recenttracks.track[0]["@attr"].nowplaying 

與

data.recenttracks.track[0]["@attr"] && data.recenttracks.track[0 ["@attr"].nowplaying 

即應停止錯誤發生的歷史，如果data.recenttracks.track[0]["@attr"]未定義

Answer 2

嘗試改變您定義nowplaying這一行：

nowplaying =（data.recenttracks.track [0] [「@ attr」]）？ data.recenttracks.track [0] [「@ attr」]。nowplaying：undefined;

根據chrome錯誤，data.recenttracks.track [0] [「@ attr」]是未定義的，這意味着您無法在其上查找屬性。您可以使用if語句或三元語法來檢查它是否在檢查其nowplaying屬性之前是否已定義。

Answer 3

var attrs = data.recenttracks.track[0]["@attr"]; 

if (typeof attrs !== 'undefined') { 
    var nowPlaying = attrs.nowplaying; 
} 

Answer 4

試試這個：

var track = data.recenttracks.track[0]; 
var nowplaying = track.hasOwnProperty('@attr') && track['@attr'].nowplaying; 

Answer 5

我剛剛建立了一個非常類似的功能，爲我的網站Last.fm，跑到這個同樣的問題。我可以通過刪除隨附的.nowplaying來解決問題。

見下文。希望它有幫助！

// get the api 
$.getJSON('http://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=YOURUSERNAME&limit=1&api_key=YOURAPIKEY&format=json', function(data) { 

    var latesttrack = data.recenttracks.track[0] 
    var trackTitle = latesttrack.name 
    var trackArtist = latesttrack.artist["#text"] 

    // detect if the track has attributes associated with it 
    var nowplaying = latesttrack["@attr"] 

    // if nowplaying is underfined 
    if (typeof nowplaying === 'undefined') { 

     $('.nowplaying').html("Currently listening to nothing.") 

    } else { 

     $('.nowplaying p').html("Currently listening to" + trackTitle + " by " + trackArtist) 

    } 

}); 

看到它在這裏的行動：http://theadamparker.com/daily

Answer 6

<script type="text/javascript"> 
     //<![CDATA[ 
      var lastfm_api  = 'http://ws.audioscrobbler.com/2.0/'; 
      var lastfm_methods = 'user.getRecentTracks'; 
      var lastfm_user = 'YOUR_USERNAME'; 
      var lastfm_key  = 'YOUR_APIKEY'; 
      var lastfm_limit = '1'; 

      var lastfm_json = lastfm_api + '?method=' + lastfm_methods + '&user=' + lastfm_user + '&api_key=' + lastfm_key + '&limit=' + lastfm_limit + '&format=json'; 

      $.getJSON(lastfm_json, function(data) { 
       var html = ''; 
       var song = data.recenttracks.track[0].name, 
        artist = data.recenttracks.track[0].artist["#text"], 
        url = data.recenttracks.track[0].url, 
        cover = data.recenttracks.track[0].image[0]['#text']; 

       html += '<p><a href="' + url + '" title="Click here to view song in Last.fm" target="_blank">' + song + ' by ' + artist + '<br /><br /><img src="' + cover + '" style="display: block; width: 96px; height: 96px;" /></a></p><p><a href="https://twitter.com/intent/tweet?text=Listening%20♪%20' + song + '%20by%20' + artist + '%20via%20%40Lastfm&url=' + url + '&original_referer=' + url + '" title="Click here to view song in Last.fm" target="_blank">Share on Twitter</a></p>'; 

       $('#recent-tracks').append(html); 
      }); 
     //]]> 
    </script> 

    <div id="recent-tracks"></div>