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 AJAX Basics Programming AJAX Parsing JSON Data

Adam Saulters
Adam Saulters
7,468 Points
Posted by Adam Saulters
Adam Saulters
7,468 Points

I am not getting the same output as the instructor with this...

I am going through the AJAX portion of the front end web dev track and I am not getting the same output as the instructor. I am not getting any error on my console, but it just isn't pulling the file with anything I do. I have tried a couple of different things to see if I am just messing up with my code somewhere, but I am still unable to figure out what I am doing incorrectly on this.

I can see where I am getting this on the console, but that's it.

widget.js:9 XHR finished loading: GET "http://port-80-xjtku09k6b.treehouse-app.com/employees.json".

Here is the code I am using. I appreciate any suggestions/help! Thanks so much!

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readystate === 4) {
    var employees = JSON.parse(xhr.responseText);
    console.log(employees);
  }
};
xhr.open('GET', 'data/employees.json');
xhr.send();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX Office Status Widget</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src="js/widget.js"></script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Corporate Intranet</h1>

PS. I'm not positive if that is how you do markdown or not, if not do you just preview it and then do a snippet for a screenshot? Thanks again!

1 Answer

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hey Adam, it looks like the readystate on line three of the code you shared above needs to be camelCased - readyState.

Stephanie Peets
Stephanie Peets
7,357 Points
Stephanie Peets
Stephanie Peets
7,357 Points

Adam, I had the same issue. Thank you for posting!

Robert, do you know why xhr.onreadystatechange is all lowercase but xhr.readyState is camelCase?

Robert Manolis
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hey Stephanie, looks like it has to do with one being an event and the other a property, and those two things having different naming conventions. Here's a Stack Overflow that goes into more detail. :thumbsup: