JavaScript AJAX Basics (retiring) Programming AJAX Parsing JSON Data

Callum Bain
Callum Bain
5,440 Points

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

Leo Brown
Leo Brown
6,896 Points

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.

Aaron Munoz
Aaron Munoz
11,177 Points

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

Allison Davis
Allison Davis
12,697 Points

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?

Callum Bain
Callum Bain
5,440 Points

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.

Callum Bain
Callum Bain
5,440 Points

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.

Nik Payne
Nik Payne
1,397 Points

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.

Felicitas Sanchez
Felicitas Sanchez
2,299 Points

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.

TJ Tijerina
TJ Tijerina
15,273 Points

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

Alan Sloan
Alan Sloan
15,618 Points

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