JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge

Incorrect 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

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