$ .getJSON ничего не возвращает, несмотря на успех

Question

Я относительно новичок во всей работе jQuery, поэтому извиняюсь, если это действительно очевидная вещь.

Основная проблема заключается в том, что URL-адрес внутри функции .getJSON() ничего не возвращает, несмотря на то, что файл JSON действителен.

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=? в конец вашей конечной точки обслуживания. (JQuery будет посылать необходимое Вам callback значения, когда sendng запроса)

// 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>'); 
    }); 
});