Javascript 解析JSON响应_Javascript_Json_Parsing

Javascript 解析JSON响应

javascript json parsing

Javascript 解析JSON响应,javascript,json,parsing,Javascript,Json,Parsing,我从一个服务器得到这个JSON响应，这个响应已经过验证，我无法用我当前的代码解析它。它一直说数据是“未定义的”。有人知道出了什么问题吗这是JSON： { "response": { "status": { "version": "4.2", "code": 0, "message": "Success" }, "arti

我从一个服务器得到这个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>


项目
var apirl=”http://developer.echonest.com/api/v4/artist/";
var key=“*******”；
var format=“format=json”；
函数callApi（方法、参数、回调）{
var requestUrl=apirl+method+key+format+“&”+参数；
试一试{
var request=new XMLHttpRequest（）；
request.addEventListener（“readystatechange”，
函数（）{callBack（request）；}，false）；
打开（“GET”，requestUrl，true）；
setRequestHeader（“Accept”，“application/json；charset=utf-8”）；
request.send（）；
}//结束尝试
捕获（例外）{
警报（“请求失败”）；
}//端接
}//端函数调用API
函数解析数据（请求）{
if（request.readyState==4&&request.status==200）{
var data=JSON.parse（request.responseText）；
显示名称（数据）；
}//如果结束
}//结束函数解析数据
函数显示名（数据）{
var listbox=document.getElementById（“艺术家”）；
listbox.innerHTML=“”；
for（var i=0；i您不能使用for
对对象进行迭代（至少不正确）。在我看来，您似乎想要对艺术家进行迭代：
function displayNames(data) {
    var artists = data.response.artists;
    /* snip */
    entry.innerHTML = artists[i].name + artists[i].id;
    /* snip */
}

如果将console.log（data）
放在var data=…
和displayNames之间（…
，打印什么？可能json不是问题所在。我们可以看到displayNames
？问题是显示名称是传递数据的，但数据是未定义的，因此它对结果没有任何作用，也没有打印任何内容。据我所知，我的语法是正确的，应该可以工作。数据仍然未定义，我不知道“我不知道为什么。@Jaylinfredrick你的问题中的JSON是从哪里来的？谢谢你的帮助和你的时间。我不会明白的。”。