解析 JSON 响应

Question

我从服务器获得了这个 JSON 响应，它已经过验证，但我无法用我当前的代码解析它。它一直说数据是“未定义的”。有人知道出了什么问题吗？

这是 JSON：

   {
       "response": {
           "status": {
               "version": "4.2",
               "code": 0,
               "message": "Success"
           },
           "artists": [
               {
                   "name": "Radiohead",
                   "id": "ARH6W4X1187B99274F"
               },
               {
                   "name": "Radioheadheadhead",
                   "id": "ARKVYRS126DD652B02"
               },
               {
                   "name": "Radiohead Lullabies",
                   "id": "ARHYPRQ11F4C83D230"
               },
               {
                   "name": "Radioheadheadheadheadhead",
                   "id": "ARPMOVZ126DD9A5A25"
               },
               {
                   "name": "Radiohead Tribute - Meeting in the Aisle",
                   "id": "ARVOZQT11E8F5C12BA"
               },
               {
                   "name": "On a Friday",
                   "id": "ARZNOIY1187B989D9C"
               },
               {
                   "name": "Wonky vs. Radiohead",
                   "id": "AR26WWW1187FB40070"
               },
               {
                   "name": "Meeting in the Aisle: a Tribute to the Music of Radiohead",
                   "id": "ARVGJEW11E8F5C0E4E"
               }
           ]
       }
   }

这是我编写的不起作用的代码。我故意从代码中删除了键值，因为它应该是机密的。另外，我确实意识到 hotttnesss 拼写错误。他们就是这样拼写的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
<script>

var apiUrl = "http://developer.echonest.com/api/v4/artist/";
var key = "*****";
var format = "format=json";

function callApi(method, arguments, callBack){
var requestUrl = apiUrl+method+key+format+"&"+arguments;
try{
var request = new XMLHttpRequest();
request.addEventListener("readystatechange",
function() {callBack(request);}, false);
request.open("GET", requestUrl, true);
request.setRequestHeader("Accept", "application/json; charset=utf-8");
request.send();
}//end try
catch(exception){
alert("Request Failed");
}//end catch
}// end function callApi


function parseData(request){
if(request.readyState==4 && request.status==200){
var data = JSON.parse(request.responseText);
displayNames(data);
}//end if
}// end function parseData


function displayNames(data){
var listbox = document.getElementById("artists");
listbox.innerHTML = "";
for(var i=0; i<data.length; i++){
var entry = document.createElement("div");
var field = document.createElement("fieldset");
entry.onclick = function() { getGenre(this, this.id);
getHotttnesss(this, this.id);
getSimilar(this, this.id);
getNews(this, this.id);};
entry.number = i;
entry.innerHTML = data[i].name + data[i].id;
field.appendChild(entry);
listbox.appendChild(field);
}//end for
}//end function displayNames


function search(input){
var listbox = document.getElementById("artists");
listbox.innerHTML = "";
callApi("search", "name="+input, parseData);
}//end function search


function getGenre(entry, id){
var requestUrl = apiUrl+"profile"+key+id+"&bucket=genre&"+format;
try{
var request = new XMLHttpRequest();
request.addEventListener("readystatechange",
function() {displayGenre(entry, request);}, false);
request.open("GET", requestUrl, true);
request.setRequestHeader("Accept", 
"application/json; charset=utf-8" );
request.send();
}//end try
catch(exception){
alert("Request Failed");
}//end catch
}//end function getGenre


function displayGenre(entry, request){
if(request.readyState==4 && request.status ==200){
var data = JSON.parse(request.responseText);
var name = entry.innerHTML;
entry.innerHTML = name +"<br>"+data.genre;
}//end if
}//end function displayGenre


function getHotttnesss(entry, id){
var requestUrl = apiUrl+"hotttnesss"+key+id+"&"+format;
try{
var request = new XMLHttpRequest();
request.addEventListener("readystatechange",
function() {displayHotttnesss(entry, request);}, false);
request.open("GET", requestUrl, true);
request.setRequestHeader("Accept", 
"application/json; charset=utf-8" );
request.send();
}//end try
catch(exception){
alert("Request Failed");
}//end catch
}//end function getHotttnesss


function displayHotttnesss(entry, request){
if(request.readyState==4 && request.status ==200){
var data = JSON.parse(request.responseText);
var name = entry.innerHTML;
entry.innerHTML = name +"<br>"+data.hotttnesss;
}//end if
}//end function displayHotttnesss


function getSimilar(entry, id){
var requestUrl =apiUrl+"similar"+key+id+"&"+format+"results=3";
try{
var request = new XMLHttpRequest();
request.addEventListener("readystatechange",
function() {displaySimilar(entry, request);}, false);
request.open("GET", requestUrl, true);
request.setRequestHeader("Accept", 
"application/json; charset=utf-8" );
request.send();
}//end try
catch(exception){
alert("Request Failed");
}//end catch
}//end function getSimilar


function displaySimilar(entry, request){
if(request.readyState==4 && request.status ==200){
var data = JSON.parse(request.responseText);
var name = entry.innerHTML;
entry.innerHTML = name +"<br>"+data.similar;
}//end if
}//end function displaySimilar


function getNews(entry, id){
var requestUrl = apiUrl+"news"+key+id+"&"+format+"&results=3";
try{
var request = new XMLHttpRequest();
request.addEventListener("readystatechange",
function() {displayNews(entry, request);}, false);
request.open("GET", requestUrl, true);
request.setRequestHeader("Accept", 
"application/json; charset=utf-8" );
request.send();
}//end try
catch(exception){
alert("Request Failed");
}//end catch
}//end function getNews


function displayNews(entry, request){
if(request.readyState==4 && request.status ==200){
var data = JSON.parse(request.responseText);
var name = entry.innerHTML;
entry.innerHTML = name +"<br>"+data.news;
}//end if
}//end function displayNews


function start(){
document.getElementById("artistName").addEventListener("keyup",
function(){search(this.value);}, false);
}//end function start


window.addEventListener("load", start, false);
</script>
</head>

<body>
<div>
<p>Search Artist<input id="artistName">
<div id="artists"></div>
</div>
</body>
</html>

Answer 1

你不能用for 迭代一个对象（至少不能正确）。在我看来，您想遍历artists：

function displayNames(data) {
    var artists = data.response.artists;
    /* snip */
    entry.innerHTML = artists[i].name + artists[i].id;
    /* snip */
}