列表中填充了JSON文件

Question

I'm trying to get a list filled with strings from a JSON file. It work's for one string 'name', but when i try to add another string 'age' it gets an undefined error.

(part of) HTML file

<ul id="people"></ul>

      var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(xhttp.responseText);
        var people = response.people;

        var output = '';
        for(var i = 0;i < people.length;i++){
          output += '<li>'+people[i].name+'</li>';
        }
        document.getElementById('people').innerHTML = output;
      }
  };
  xhttp.open("GET", "people.json", true);
  xhttp.send();

//json file //

  {
  "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
    }
  ]
}

Answer 1

Your json file has a weird(and probably wrong) kind of value:

"date": 11 "november" 2017,

I don't know if you can create a json file with a value like this.

But you can do it like:

  peoples =[
    {
      "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
    }
  ]

 

        var people = peoples

        var output = '';
        for(var i = 0;i < people.length;i++){
          output += '<li>'+people[i].name + ':' +people[i].age+'</li>';
        }
        document.getElementById('people').innerHTML = output;
      

<ul id="people"></ul>

</div>