検証済みのサーバーからこの 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>