简单的ajax请求加载外部json文件

Question

我正在学习ajax ....我正在尝试从json文件发出基本请求，该文件与我的index.html位于同一文件夹中，但由于某种原因，它说未定义:(我可以看到错误在可变的人，但我无法理解为什么它是不确定的...

HTML：

<div id="personName"></div>

JavaScript的：

 var xhr = new XMLHttpRequest(); //it holds the ajax request
     xhr.onreadystatechange = function() { //callback 
             if(xhr.readyState === 4) {
               var people = JSON.parse(xhr.responseText);//it takes the string from the response and it converts it in a javascript object
               console.log(people);
                 for (var i=0; i<people.length; i += 1) {
                      var htmlCode = "<p>" + people[i].name + "</p>";
                 }                
                      document.getElementById('personName').innerHTML = htmlCode;
     } else {
         console.log(xhr.readyState);
     }
 };
 xhr.open('GET', 'addresses.json');
 xhr.send();

addresses.json：

{ 
    "people":  [    
            {
                "position"     : "1",
                "name"         : "Familia Molina Fernandez",
                "streetType"   : "C/",
                "streetName  " : "Nuria",
                "streetNumber" : "40",
                "floor"        : "",
                "flat"         : "",
                "zipCode"      : "08202",
                "city"         : "Sabadell",
                "state"        : "Barcelona",
                "country"      : "Spain"
            },
            {
                "position"     : "2",
                "name"         : "Familia Astals Fernandez",
                "streetType"   : "Avda/",
                "streetName  " : "Polinya",
                "streetNumber" : "61",
                "floor"        : "1",
                "flat"         : "1",
                "zipCode"      : "08202",
                "city"         : "Sabadell",
                "state"        : "Barcelona",
                "country"      : "Spain"
            }
  ]
}  

有任何想法吗？

干杯！！！！

Answer 1

试试console.log(people); 并查看变量所引用的对象。 （ 提示：这不是您想的那样！ ）

您的可变people是指仅具有一个名为“人员”的属性的对象。 该属性是一个数组。 因此，使用该JSON结构，可以编写代码：

var data = JSON.parse(...)
var people = data.people;

（或者，我可能会重新设计JSON并删除额外的间接级别：仅对数组本身进行编码，而无需将其包装在不包含任何其他内容的对象中）