Incorrect URL for JSON data?

I 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.

I 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.

Yes, the variables are different. I use xhr for the employees request and xhr_rooms for the rooms request.

I just finished this course the correct url is ../data/rooms.json . Have you created the rooms.json file and added the info there?

That 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();