javascript - 尝试从 URL 解析 JSON 文件

Question

这是我正在使用的 json:json

我希望能够从中提取不同的数据并将其显示在网页上。特别是徽章名称和相关信息。徽章数组给我带来了麻烦。

我在这里查看了 jquery 文档:http://api.jquery.com/jquery.getjson/但他们有点失去了我，因为这与我想做的事情不符。

这是我尝试过但没有成功的 js 文件...谢谢

`

//Function to print message to console
function printMessage(badgeCount, points, arr) {
  const message = `Anthony Scott has ${badgeCount} total badge(s) and ${points} points in JavaScript. here is a list of badges ${arr}`;

    document.write(message);
}

(function() { 
   $.getJSON("https://teamtreehouse.com/anthonyscott4.json", {})
     .done(function(data) {
            // Parse the data
                const profile = JSON.parse(data);                            
                // Print the data
                                let arr = [];
                                for(var x in profile.badges) {
                                    arr.push(profile.badges[x].name)
                                }
                document.write(profile.badges.length, profile.points.JavaScript, arr);
     });

}); 

`

Answer 1

由于您使用的是 $.getJSON，因此 JSON 已在回调中为您解析，因此无需调用 JSON.parse 结果。

for in 循环用于 iterate over an objects properties 。您正在寻找的是正常的 for 循环或 forEach

var request = $.getJSON('https://teamtreehouse.com/anthonyscott4.json');
request.done(function (response) {
  var badges = [];
  response.badges.forEach(function (badge) {
    badges.push(badge.name);
  });
  $('#result').append(badges.toString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

for 循环示例:

var request = $.getJSON('https://teamtreehouse.com/anthonyscott4.json');
request.done(function (response) {
  var badges = [];
  for (var i = 0; i < response.badges.length; ++i) {
    var badge = response.badges[i];
    badges.push(badge.name);
  }
  $('#result').append(badges.toString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>