簡單的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文件

回答

相關問題