$ .getJSON成功不返回任何东西

Question

对于整个jQuery，我还是比较陌生的人，因此，如果这确实很明显，我深表歉意。

我的基本问题是，即使JSON文件有效，.getJSON（）函数中的URL也不会返回任何内容。

jQuery的：

$(document).ready(function() {
  var key = '*****************'

  var getMusic = function() {
      $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin', function(data) {
          $('.songs').append('<li>success</li>');
          data['songs'].forEach(function(d) {
              $('.songs').append('<li>' + d['title'] + '</li>');
          });
      });
  };

  $('.click').click(getMusic);
});

因此，“成功”将附加到列表中，但没有其他操作。 Chrome中的调试控制台给我以下错误： Uncaught TypeError: Cannot read property 'forEach' of undefined

我假设这意味着URL没有将任何内容传递给该函数。 但是该URL有效。 如果我只是将其键入Chrome，则会收到以下响应。

{  
  "response":{  
  "status":{  
     "version":"4.2",
     "code":0,
     "message":"Success"
  },
  "songs":[  
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOWOYIL14EEE38DB16",
        "artist_name":"Led Zeppelin",
        "title":"St. Tristan's Sword (Rough Mix)"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOWTZWK12A6D4FC7A8",
        "artist_name":"Led Zeppelin",
        "title":"Rock And Roll - 2007 Remastered Version Live Version From The Song Remains The Same"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOWYEOY14EEE39630C",
        "artist_name":"Led Zeppelin",
        "title":"Bring It On Home (Rough Mix)"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXAPFT12AF72A0776",
        "artist_name":"Led Zeppelin",
        "title":"The Ocean (Live Album Version)"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOTYJLS12A8C13B4A9",
        "artist_name":"Led Zeppelin",
        "title":"Somethin' Else - \"Tasty Pop Sundae\" Live Version From BBC Sessions"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOUQMIU12B0B8083DF",
        "artist_name":"Led Zeppelin",
        "title":"1-06 For Your Life"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOUKOUX12B0B80B0BA",
        "artist_name":"Led Zeppelin",
        "title":"308 - The Song Remains The Same"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXXFOR12A8C13A5C6",
        "artist_name":"Led Zeppelin",
        "title":"Whole Lotta Love - \"Top Gear\" Live Version From BBC Sessions"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXHHNN14DB525B914",
        "artist_name":"Led Zeppelin",
        "title":"Heartbreaker (For Voice)"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXWXGG12B0B80B0AF",
        "artist_name":"Led Zeppelin",
        "title":"1-07 Trampled Underfoot"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXWUUS12B0B80B0D9",
        "artist_name":"Led Zeppelin",
        "title":"412 - Moby Dick -- Bonzo's Montreux"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXVXFK12B0B80B0C2",
        "artist_name":"Led Zeppelin",
        "title":"02 Going to California"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXZGKC12A8C13B4C9",
        "artist_name":"Led Zeppelin",
        "title":"Heartbreaker - \"In Concert\" Live Version From BBC Sessions"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXEDBF14EC9C340F9",
        "artist_name":"Led Zeppelin",
        "title":"10 Ribs & All/Carrot Pod Pod (Pod) (Reference Mix)"
     },
     {  
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOYIZYO12C106D04DB",
        "artist_name":"Led Zeppelin",
        "title":"Ramble On (1999 Star System Mix)"
     }
    ]
   }
  }

我不确定为什么代码未按预期执行。

Answer 1

您错误地访问了$.getJSON的数据，您需要首先获取响应 ：

data.response [ '歌曲']

$(document).ready(function() {
  var key = '*****************'

  var getMusic = function() {
      $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin', function(data) {
          $('.songs').append('<li>success</li>');
          data.response['songs'].forEach(function(d) {
              $('.songs').append('<li>' + d['title'] + '</li>');
          });
      });
  };

  $('.click').click(getMusic);
});

Answer 2

请注意， data是JSON根对象，具有response属性。 songs位于response属性中，因此要访问它，您必须访问data.response.songs

正确的代码是：

data.response.songs.forEach(function (song) {
    $('.songs').append('<li>' + song.title + '</li>');
});

---

如果必须使用JSONP

根据@Pointy的评论，似乎出于安全原因（可能是由于跨域问题），您应该使用JSONP 。

为了使用JSONP，您必须提供一个附加&callback=?的回调函数&callback=? 到服务端点的末端。 （当发送请求时，jQuery将发送适当的callback值）

// Note the trailing "callback=?"
$.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin&callback=?')
.done(function (data) {
    $('.songs').append('<li>success</li>');
    data.response.songs.forEach(function (song) {
        $('.songs').append('<li>' + song.title + '</li>');
    });
});