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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![KREATIVE LLC.](https://secure.gravatar.com/avatar/424ecdf26b55ddf2964f258e7626611a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
KREATIVE LLC.
Courses Plus Student 14,143 PointsIncorrect URL for JSON data?
My question: Is the provided URL for the JSON data in this challenge incorrect or is mine simply working differently because I am running a local server and not using workspaces?
In AJAX Basics - Stage 2 Challenge, it is supplied that the URL for the JSON data we will need is "../data/rooms.json". I tried coding it with that URL and tried running the completed example from the project files stage2 > video7 > index.html, but no content would show up for either project.
I re-coded the URL as "data/rooms.json" with no navigating to a parent directory first and it works fine. Presumably because the widget.js file that this URL is being used in is actually included as a script tag inside the index.html file which is located at the root of the project folder anyway. It is also worth noting that my request for the "data/employees.json" URL is coded the exact same way and also works perfectly, as opposed to the example code provided in the stage2 > video7 project that uses "../data/employees.json" and doesn't display anything.
I have XAMPP and am running a local server on my PC so I am not using the workspaces provided. Does this change the behavior of how files are navigated to (which I can't imagine why it would)? Or has the instructor simply goofed and provided incorrect information?
5 Answers
![Lee Earley](https://secure.gravatar.com/avatar/8ffc31009477cad69f9d426d713a43b8?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Lee Earley
15,688 PointsI know this post is older but I had the same issue using a local web server and the downloaded project files.
I believe the relative path using the two dots is incorrect (eg. '../data/rooms.json'). When I ran it locally it tried to find the data folder one level up from where the HTML was loaded, not where the script is located as indicated from the following error (the project files are all in a video6 subfolder which is inside stage2):
GET http://localhost/AJAX_Basics_Project_Files/stage2/data/rooms.json 404 (Not Found)
I think the relative path should actually be relative to the document calling the script (index.html in this case), not the location of the script itself. If you change the path to remove the dots or just use a single dot it works. Like this.
xhrRooms.open('GET', './data/rooms.json');
GET "http://localhost/AJAX_Basics_Project_Files/stage2/video6/data/rooms.json".
The code above works in Workspaces as well. I believe the reason the other version works in Workspaces is because the page is loaded from the highest directory in the tree so the relative path specifying one-level up has no effect because it can't go any higher.
![KREATIVE LLC.](https://secure.gravatar.com/avatar/424ecdf26b55ddf2964f258e7626611a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
KREATIVE LLC.
Courses Plus Student 14,143 PointsI too completed the challenge. I have everything working as of the Stage 2 Challenge. I wasn't having trouble with that. I was having trouble understanding why mine works, but has to be coded slightly differently.
So now that I know "../data/rooms.json" obviously works for some people and not for me, and just "data/rooms.json" works for me, then the part of my question I still need answered is 'why is mine differemt?'
Just to clarify:: when I call xhr.open("GET", "../data/rooms.json"); xhr.send() I get a '404 file not found' error and nothing from the JSON file is returned or displayed to the widget. <------- this is also the code provided in the completed example ( stage2 > video7 > js > widget.js ) which displays nothing to either widget when I open it in Chrome through my local server ------->
BUT
when I call xhr.open("GET", "data/rooms.json"); xhr.send(); everything works fine and the data from the JSON file is loaded and displayed in the widget properly.
![KREATIVE LLC.](https://secure.gravatar.com/avatar/424ecdf26b55ddf2964f258e7626611a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
KREATIVE LLC.
Courses Plus Student 14,143 PointsYes, the variables are different. I use xhr for the employees request and xhr_rooms for the rooms request.
![Mike Fondario](https://uploads.teamtreehouse.com/production/profile-photos/275352/micro_image.jpg)
Mike Fondario
11,286 PointsI just finished this course the correct url is ../data/rooms.json . Have you created the rooms.json file and added the info there?
![Mike Fondario](https://uploads.teamtreehouse.com/production/profile-photos/275352/micro_image.jpg)
Mike Fondario
11,286 PointsThat is weird. I created another variable for the second widget. Did you use xhr as your variable for both widgets?
Here is what I have. I switched the var xhr to conf for the second widget.
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();
var conf = new XMLHttpRequest();
conf.onreadystatechange = function(){
if(conf.readyState === 4) {
var rooms = JSON.parse(conf.responseText);
var statusHTML = '<ul class = "rooms">';
for (var i=0; i<rooms.length; i += 1) {
if(rooms[i].inroom === true) {
statusHTML += '<li class = "empty">';
} else {
statusHTML += '<li class = "full">';
}
statusHTML += rooms[i].room;
statusHTML += '</li>';
}
statusHTML += '</ul';
document.getElementById('roomList').innerHTML = statusHTML;
}
};
conf.open('GET', '../data/rooms.json');
conf.send();