Question

这是我想要从数据中打印出“歌曲”属性的代码。链接到JSON是 - ＆gt; 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>

当我在浏览器中运行它时，我将[object Object]，[object Object]，[object Object]，[object Object]，[object Object]作为OUTPUT或undefined。

Answer 1

您的数据如下所示：

[  //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"
}]

所以循环一个可以做

var limit=Math.max(data.length,100);//max displayed number

for(var i=0;i<limit;i++){
 document.write(data[i].song+"<br>");
}

整个代码：

    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);

Answer 2

您无法将整首歌曲对象写入文档。你应该先映射它：

var songNames = data.map(function(item) { return item.song; });

这将为您提供一个包含所有名称（字符串）的数组，您可以将其写入文档：

songNames.forEach(function(songName) {
    document.write(songName + '<br>');
});

Answer 3

您需要使用JSON.stringify;如果您打算写入文档，我建议用pre标签包装以保留字符串格式。

＆＃13;

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>');

＆＃13;

Answer 4

您需要对对象进行字符串化以使其可读。

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

Answer 5

请求的响应是一个json对象数组，你只是试图一遍又一遍地写回返对象。您需要迭代返回的数据并输出每个对象的值。将showdata函数更改为：

function showdata(data){


        for (i = 0; i < 3; i++) {

            document.write(data[i].song);
            document.write("<br>");

        }
    }

我应该如何遍历此JSON数据？

5 个答案: