解析JSON响应

Parsing a JSON response

本文关键字：响应 JSON 解析      更新时间：2023-09-26

我正在从服务器获得此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"
               }
           ]
       }
   }

这是我写的不能工作的代码。我故意从代码中删除了键值，因为它应该是机密的。而且，我也意识到hottness这个词拼写错了。他们就是这么拼的

<!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>

您不能使用for迭代对象(至少不能正确地)。在我看来，你想迭代artists:

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