如何访问JSON对象中的第一个运动员数据？

哦，我一眼就看出问题所在了！你的JSON数据结构犯了一个典型错误——JavaScript/JSON对象中不允许存在重复的键名。当解析器处理你的data.json时，后面那个"athlete"键会直接覆盖掉前面的第一个，所以你永远拿不到第一个运动员的数据，这就是为啥页面只显示第二个名字的原因。

第一步：修正JSON结构 #

正确的做法是把athletes从一个包含重复键的对象，改成存储多个运动员对象的数组。修改后的data.json应该是这样：

{
  "athletes": [
    {
      "name": "Example name",
      "year": 2021,
      "lift": {
        "Deadlift": "180kg",
        "Squat": "120kg",
        "Benchpress": "100kg"
      }
    },
    {
      "name": "Nice example name",
      "year": 2020,
      "lift": {
        "Deadlift": "80kg",
        "Squat": "100kg",
        "Benchpress": "140kg"
      }
    }
  ]
}

第二步：修改JS代码读取数据 #

现在athletes是数组了，你可以通过索引直接访问第一个运动员，也可以遍历所有数据：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(xhttp.responseText);
    
    // 直接获取第一个运动员的名字
    document.getElementById("test-data").innerText = response.athletes[0].name;
    
    // 如果需要遍历所有运动员（可选）
    let allNames = response.athletes.map(athlete => athlete.name).join("\n");
    document.getElementById("test-data").innerText = allNames;
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();

为什么之前的写法无效？ #

你尝试的response.athletes[0].athlete.name这类写法没用，因为原来的athletes是对象不是数组，[0]是数组的索引语法，对象不能这么用；而for...in循环遍历的是对象的键，原来的athletes对象里只有一个athlete键（因为被覆盖了），所以循环也只能拿到那一个数据。

（不推荐的hack方案）如果无法修改JSON结构 #

如果你因为某些限制不能改JSON，只能用临时的字符串替换方法（非常不推荐，因为维护性极差）：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 先把重复的athlete键改成不同的名字
    var fixedText = xhttp.responseText.replace(/"athlete":/g, '"athlete' + Math.random() + '":');
    var response = JSON.parse(fixedText);
    // 然后遍历所有键获取数据
    let athletes = Object.values(response.athletes);
    document.getElementById("test-data").innerText = athletes[0].name;
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();

这个方法只是临时救急，强烈建议还是修正JSON结构，因为重复键本身就是不符合规范的写法，后续很容易出其他问题。

内容的提问来源于stack exchange，提问作者Sybrentjuhh