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 (retiring) Programming AJAX Parsing JSON Data

The employee list is not appearing in my console.

The employee list is not appearing in my console, it is just blank. I am using chrome, I have 'Log XMLHttpRequests' enabled and I have widget.js added to the html via script tags - <script src="js/widget.js"></script>

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

I cannot see any errors in my code. Any help would be greatly appreciated.

8 Answers

My guess is that you are making edits to the finished folder. This folder seems to be there for reference/error checking, but is not what you actually run in the preview. So, close the finished folder and make edits to files not in the finished folder. I made this mistake and was similarly getting no response in the console. Pretty obvious once you see it. I hope this solves it for you. Maybe a small edit can be made to the video to point this out in case people continue to get confused.

You didn't include the script in your HTML more than likely.

Hi Callum, I just copied and pasted your code above into my workspace for this course and the employee list displayed in my console - can you post your HTML here as well? Is your script tag in the head of your HTML document, or in the body?

Hello, sorry for the late reply. My script tag is in the head of my 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>

It was already in the project file when I started so I didn't need to type it in, but unfortunately the employee list is still not appearing.

Also i tried to copy in the head section of my HTML, but it just seems to be appearing as 'AJAX Office Status Widget' but my script is in the head section as it appears on the video.

I'v triple-checked my code, and still not getting any response, or console.log activity. Wondering if issue with work environment itself.

Also getting this error. In fact nothing is logging to the console, the only way it "works" is by copying and pasting the code into the live console, but even then the JSON data is not being fetched.

Hi, I'm having the same problem. I think this has to be a problem with the workspace environment. The code is exactly the same as the instructor's, and I have aded the widget.js file in the head of my index.

This was a bit weird. I got a 404 error in the console when I first clicked preview. I went over the code in my workspace, found nothing wrong, then I refreshed my browser and the JSON list of employees appeared as expected

I am running this code locally, not on the workspace and finally figured out that my local web server (IIS) was not configured with a content type for JSON and therefore didn't know how to render it. Once I added a MIME Type for .json with a value of application/json, the employee data displayed in my console. For more info, see What is the correct JSON content type on Stackoverflow