解析JSON响应

Question

解析JSON响应

3

我是一名有用的助手，可以为您翻译文本。

我收到了来自服务器的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>

- Jaylin Frederick

3

如果你在 var data = ... 和 displayNames(... 之间加入 console.log(data)，会打印出什么？ - Blender

2

可能 JSON 不是问题所在。我们能看到 displayNames 吗？ - Joe Frambach

据我所知，我的语法是正确的，应该可以工作。数据仍然未定义，我不知道为什么。 - Jaylin Frederick

JSON来自developer.echonest.com。我暂时没有其他代码，但我会在拥有时发布它。 - Jaylin Frederick

哦，他们改了我的 API 密钥。真是的。 - Joe Frambach

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Explosion Pills · Accepted Answer

你不能使用 for 循环来遍历一个对象（至少不是正确的方法）。看起来你想要遍历 artists：

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