simple ajax request to load external json file

Question

I'm learning ajax.... I am trying to make a basic request from a json file, which is in the same folder as my index.html, but for some reason it says undefined :( I can see the error is on the variable people, but I can't catch why it's undefined....

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

Any ideas?

Cheers!!!!

ohmg O__O I am not trying to call any property.... I am trying to loop through the whole array length :S Oux wait a minute.... I'm realising now.... length is just for strings... isn't it? what should I use then? :S — eve_mf
– eve_mf, Commented Nov 3, 2015 at 17:06
Objects doesn't have length ; but people is an object. Use for (var key in people) { console.log(people[key]); } — pistou
– pistou, Commented Nov 3, 2015 at 17:11

dsh · Accepted Answer · 2015-11-03 17:05:02Z

4

Try console.log(people); and take a look at the object to which your variable refers. (Hint: it's not what you think it is!)

Your variable people refers to an object with only one attribute named "people". That attribute is an array. So with that JSON structure, your code could be written:

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

(alternatively, I might redesign the JSON and remove the extra level of indirection: just encode the array itself without wrapping it in an object that contains nothing else)

answered Nov 3, 2015 at 17:05

dsh

12.3k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eve_mf Over a year ago

dsh, thank you! now it's displaying at least one of the names. However, as I said.... I'm learning... so it sounds a bit too complicated. Saying redesign the JSON you mean deleting "people:" ?

dsh Over a year ago

Yes. Instead of {"people": [...]} to have [...] Then the data structure would match the code you posted.

Collectives™ on Stack Overflow

simple ajax request to load external json file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related