Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Veronica Rivera
Veronica Rivera
32,599 Points

Undefined Loops in Ajax Call

I am trying to Load JSON data via AJAX in a and create table rows for each object. I have a JSON file called staff.json. It has 4 objects. When I checked the data it returned in a console.log in Chrome, I get the 4 objects in my JSON file but when I tried to create the rows using the data, is creating a bunch of <td> tags with the words "undefined" in it.

This is my HTML

       <h1>AJAX Table Test</h1>
        <h2>Staff List</h2>
        <table class="table table-inverse table-responsive table-bordered table-hover">
            <thead>
                <th>Name</th>
                <th>Title</th>
                <th>Email</th>
            </thead>
            <tbody id="staff">
            </tbody>
       </table>

This is the Javascript

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        var staff = xhr.responseText;
        console.log(staff);
        var staffHTML = "";
        for (var i = 0; i < staff.length; i++) {
            staffHTML += "<tr><td>" + staff.name + "</td>";
            staffHTML += "<td>" + staff.title + "</td>";
            staffHTML += "<td>" + staff.email + "</td></tr>";
        }
       document.getElementById('staff').innerHTML = staffHTML;
    }
};
xhr.open('GET', 'staff.json');
xhr.send();

This is my staff.json

{
    "name": "Amber Rhodes",
    "title": "Principal",
    "email": "amber.rhodes@schools.com",
    "category": "administration"
}, {
    "name": "Jason Willis",
    "title": "3rd Grade Teacher",
    "email": "jason.willis@schools.com",
    "category": "teacher"
},{
    "name": "David Bates",
    "title": "Assistant Principal",
    "email": "david.bates@schools.com",
    "category": "administration"
}, {
    "name": "Victoria Montgomery",
    "title": "5th Grade Teacher",
    "email": "Victoria.montgomery@schools.com",
    "category": "teacher"
}

So I am trying to figure out why it's not displaying my data properly and where are all these undefined coming from.

Thanks, I appreciate the help.

2 Answers

Matt Milburn
Matt Milburn
20,787 Points

Hi Veronica,

Try wrapping xhr.responseText in a JSON.parse() function. This will convert the [String] response into an [Object]. A JSON object, to be exact.

var staff = JSON.parse(xhr.responseText);
Veronica Rivera
Veronica Rivera
32,599 Points

Thanks. I did some research and found out this was the issue but I greatly appreciate your response.

Veronica Rivera
Veronica Rivera
32,599 Points
Veronica Rivera
Veronica Rivera
32,599 Points

I did some research from another tutorial and found the answer.

I forgot to parse the data before using it. Once I did this, It loaded the data correctly. Here is a snippet of what I did in my AJAX request.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var staff = JSON.parse(xhr.responseText); //This where I parsed the data, which is what I was missing
        console.log(staff);
        var staffHTML = "";
        for ( var i = 0; i < staff.length; i++) {
            staffHTML += "<tr><td>" + staff[i].name + "</td>";
            staffHTML += "<td>" + staff[i].title + "</td>";
            staffHTML += "<td>" + staff[i].email + "</td></tr>";
        }
    }
    document.getElementById('staff').innerHTML = staffHTML;
};
xhr.open('GET', 'staff.json');
xhr.send();