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

我在学习ajax ....我试图从json文件发出一个基本请求，它与我的index.html位于同一个文件夹中，但由于某种原因它说未定义:(我可以看到错误是可变的人，但我不能赶上为什么它未定义....简单的ajax请求加载外部json文件

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

任何想法？

干杯!!!!

来源

2015-11-03 eve_mf

'people.length'有没有length属性来调用 – Ramanlfc

undefined是错误！ –

ohmg O__O我不是想打电话给任何财产....我通过整个数组的长度试图循环：S Oux等一下....我现在意识到....长度只是用于字符串。 ..不是吗？那我应该用什么？：S –

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

你的变量people是指一个只有一个属性名为“people”的对象。该属性是一个数组。因此，既然JSON结构，你的代码可以写成：

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

（或者，我可能会重新设计JSON和删除间接的额外层次：刚刚编码阵列本身没有包含没有别的物体包裹它）

来源

2015-11-03 17:05:02 dsh

dsh，谢谢！现在它至少显示一个名称。然而，正如我所说......我在学习......所以这听起来有些复杂。说重新设计JSON，你的意思是删除“people：”？ –

是的。而不是'{“people”：[...]}'有'''那么数据结构将匹配您发布的代码。 – dsh

yeeyyyy !!! ：D它工作！谢谢！！ –

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

回答

相关问题