我应该如何遍历此JSON数据？
[英]How should I loop through this JSON data?
问题描述
Here is my code I want to print out "song" property from data. 
这是我的代码，我想从数据中打印出“歌曲”属性。 Link to JSON is -> http://starlord.hackerearth.com/sureify/cokestudio 指向JSON的链接是-> http://starlord.hackerearth.com/sureify/cokestudio
<script type="text/javascript">
var requestURL = 'http://starlord.hackerearth.com/sureify/cokestudio';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function(){
var myjsondata = request.response;
showdata(myjsondata);
}
function showdata(data){
var song_name = data;
for (i = 0; i < 3; i++) {
document.write(song_name);
document.write("<br>");
}
}
</script>
When I run it in browser I get [object Object],[object Object],[object Object],[object Object],[object Object] as OUTPUT or undefined. 当我在浏览器中运行它时，会得到[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]为OUTPUT或未定义。
5 个解决方案
解决方案1
3 已采纳 2017-06-03 16:47:50
Your data looks like this: 您的数据如下所示：
[ //the array in data
{ //the first object, e. g. data[0]
"song":"Afreen Afreen", // song => data[0].song
"url":"http://hck.re/Rh8KTk",
"artists":"Rahat Fateh Ali Khan, Momina Mustehsan",
"cover_image":"http://hck.re/kWWxUI"
},
{
"song":"Aik Alif",
"url":"http://hck.re/ZeSJFd",
"artists":"Saieen Zahoor, Noori",
"cover_image":"http://hck.re/3Cm0IX"
},
{
"song":"Tajdar e haram",
"url":"http://hck.re/wxlUcX",
"artists":"Atif Aslam",
"cover_image":"http://hck.re/5dh4D5"
}]
So to loop over one can do 所以循环一个可以做
var limit=Math.max(data.length,100);//max displayed number
for(var i=0;i<limit;i++){
document.write(data[i].song+"<br>");
}
Whole code: 整个代码：
document.write("loading..."); xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { var data= JSON.parse(xhr.responseText); var limit=Math.max(data.length,100); for(var i=0;i<limit;i++){ document.write(data[i].song+"<br>"); } } }; xhr.open('GET', 'http://starlord.hackerearth.com/sureify/cokestudio', true); xhr.send(null);
解决方案2
1 2017-06-03 16:52:02
You cannot write the whole song object to the document. 您无法将整个歌曲对象写入文档。 You should map it first: 您应该先将其映射：
var songNames = data.map(function(item) { return item.song; });
This will give you an array of all the names (strings), which you can write to the document: 这将为您提供所有名称（字符串）的数组，您可以将其写入文档：
songNames.forEach(function(songName) {
document.write(songName + '<br>');
});
解决方案3
0 2017-06-03 16:52:46
You need to use JSON.stringify ; 您需要使用JSON.stringify ; and if you plan to write to document I suggest wrapping in pre tags as well to retain string format. 如果您打算写文档，我建议也使用pre标签包装，以保留字符串格式。
let data = [ { "song":"Afreen Afreen", "url":"http://hck.re/Rh8KTk", "artists":"Rahat Fateh Ali Khan, Momina Mustehsan", "cover_image":"http://hck.re/kWWxUI" }, { "song":"Aik Alif", "url":"http://hck.re/ZeSJFd", "artists":"Saieen Zahoor, Noori", "cover_image":"http://hck.re/3Cm0IX" }, { "song":"Tajdar e haram", "url":"http://hck.re/wxlUcX", "artists":"Atif Aslam", "cover_image":"http://hck.re/5dh4D5" } ]; document.write('<pre>'+ JSON.stringify(data, null, '\\t') + '</pre>');
解决方案4
0 2017-06-03 16:54:40
You need to stringify the object to make it readable. 您需要对对象进行字符串化以使其可读。
<html>
<body>
<script type="text/javascript">
var requestURL = 'http://starlord.hackerearth.com/sureify/cokestudio';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function(){
var myjsondata = request.response;
showdata(myjsondata);
}
function showdata(data){
var song_name = data;
for (i = 0; i < 3; i++) {
document.write(JSON.stringify(song_name));
document.write("<br>");
}
}
</script>
</body>
</html>
解决方案5
0 2017-06-03 16:55:12
The response from the request is an array of json objects and you are just trying to write the return object over and over again. 来自请求的响应是一个json对象数组，您只是试图一遍又一遍地写返回对象。 You need to iterate over the returned data and output each object's value. 您需要遍历返回的数据并输出每个对象的值。 Change your showdata function as: 将您的showdata函数更改为：
function showdata(data){
for (i = 0; i < 3; i++) {
document.write(data[i].song);
document.write("<br>");
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.