从JSON文件获取字符串列表时添加age字段出现undefined错误求助

嘿，我帮你找出问题所在啦！你遇到的undefined错误主要是两个地方出了问题，咱们一个个来看：

1. JSON数据结构和JS代码不匹配 #

你在JS代码里写的是var people = response.people;，但你的JSON文件里存放用户数组的键是highscore，不是people！这直接导致people变量变成了undefined，不管你访问name还是age都会报错。

2. JSON存在语法错误 #

你的JSON里所有的date字段格式都不对，比如：

"date": 11 "november" 2017

JSON的字符串必须用双引号完整包裹，正确的写法应该是把日期合并成一个字符串：

"date": "11 november 2017"

这个语法错误会导致JSON.parse()解析失败，后续的渲染代码根本不会执行。

修正后的JS代码 #

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(xhttp.responseText);
    // 把people改成highscore，和JSON的键对应上
    var people = response.highscore;
    var output = '';
    for(var i = 0;i < people.length;i++){
      // 现在可以正常同时显示name和age了
      output += '<li>'+people[i].name + '，年龄：' + people[i].age+'</li>';
    }
    document.getElementById('people').innerHTML = output;
  }
};
xhttp.open("GET", "people.json", true);
xhttp.send();

修正后的people.json #

{
  "highscore": [
    { "name":"Billy", "age": 12, "date": "11 november 2017", "wins": 4 },
    { "name":"Willem", "age": 16, "date": "14 juni 2017", "wins":2 },
    { "name":"Sara", "age": 14, "date": "18 mei 2017", "wins": 1 },
    { "name":"Jeff", "age": 11, "date": "2 april 2017", "wins":1 }
  ]
}

内容的提问来源于stack exchange，提问作者Nino V. Gerwen