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 Processing JSON Data

Posted by Juan Caballero
Juan Caballero
21,340 Points

Can't load employee status using AJAX - Processing JSON Data

I'm using Chrome as my web browser. I looked over my code and I found one error. Can anybody spot more:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

    if(xhr.readyState ===4) {

            var employees = JSON.parse(xhr.responseText);

            var statusHTML = '<ul class="bulleted">';

            for (var i=0; i<employees.length; i += 1) {

                if (employees[i].inoffice === true) {

                    statusHTML += '<li class="in">';

                } else {

                    statusHTML += '<li class="out">';

                }

                statusHTML += employees[i].name;

                statusHTML += '</li>';              

            }

        statusHTML += '</ul>';

        document.getElementById('employeeList').innerHTML = statusHTML;

    }

};

xhr.open('GET', 'data/employees.json');

xhr.send();
Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Have you looked in Chrome's JavaScript Console? Are there any errors?

Juan Caballero
Juan Caballero
21,340 Points

Well, it looks like it is working now. At first I thought JSON url was wrong like this:

'data/employees.json'

I modified like Shawn Flanigan mentioned and it did not work. Then I thought I was missing a line of code in index.html

<script src="js/widget.js"></script>

Code is still the same as I first posted to the forum and now is working fine.

Thanks for your replies

4 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Juan: Not sure exactly which part you're working on, but when I did the challenges in this section, the file structure was such that the JSON url was '../data/employees.json'. Your code may be looking for the file in the wrong place.

Daniel Carter
Daniel Carter
17,437 Points
Daniel Carter
Daniel Carter
17,437 Points

I am having this identical bug occur I think, at first I thought my widget.js file was awol, but after peering into the resources panel, I see it is there. My json data just doesn't load. Chiming in to let the treehouse team know this problem is reoccurring.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Daniel Carter can you create a "Workspace Snapshot" and share it here: this Preview and Snapshots video from the Using Treehouse Workspaces workshop. We'll be able to look at the code and test it.

Also, have you looked at the browser console? Are there any errors listed? If so, what are they?

Daniel Carter
Daniel Carter
17,437 Points
Daniel Carter
Daniel Carter
17,437 Points

Dave, thanks for responding and sorry for the late reply myself, I moved on from this exercise and forgot to check back on this. The nearly identical stage 2 challenge directly following this one worked fine. I'm sure I'm just brain-farting and not seeing something simple, but just in case I'll include links for both:

https://w.trhou.se/q3y5k6yoo8 - initial challenge (not working)

https://w.trhou.se/zr3qrq5q2d - stage 2 challenge

javascript console shows a single 404 error for a .ico file that should be insignificant to the issue

Thanks again.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Daniel Carter,

There are a couple of (easy-to-make) errors in your code:

if(xhr.readystate === 4 ) {
    var employees = JASON.parse(xhr.responseTEXT);
  1. should be xhr.readyState not xhr.readystate (capital S)
  2. should be JSON.parse not JASON.parse (no A in JSON)
  3. should be xhr.responseText not xhr.responseTEXT (no capital EXT)

It's tricky, I know, but all JavaScript (and these XHR methods) are case sensitive. Don't feel bad, it took me like 10 minutes staring at your code to spot the mistakes!

Daniel Carter
Daniel Carter
17,437 Points
Daniel Carter
Daniel Carter
17,437 Points

Good eye. Thanks for taking the time to sleuth it out. It is definitely weird to switch from camel-case to full acronyms like that. Glad it's not some weird bug.

I didn't even realize teachers addressed forum questions, and I have to say I've been pretty blown away by this exchange, so thanks again.

Best, Daniel