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) jQuery and AJAX The Office Status Project Revisited

Jeremy Bordeleau
Jeremy Bordeleau
8,032 Points
Posted by Jeremy Bordeleau
Jeremy Bordeleau
8,032 Points

The path to the employees.json file set in the url variable doesn't work for me.

At the top of the widget.js file, we set a variable called url. The value of the variable is the string containing the url to the JSON file we want to get. However, when the path is set to go up one directory, my console gives an error saying the file cannot be found. When I remove the "../" from the url, it works.

I guess my question is this: Is the path supposed to be relative to the widget.js file, or the index.html file that is linking to the widget.js file? For me, the only way for it to work is to type the url as if it is relative to the index.html. My folder structure is the same as Dave's in the video.

2 Answers

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

That's odd. My working code is using a relative path from the js file. Here is my working, workspace code for widget.js.

$(function() {
  var url = "../data/employees.json";
  $.getJSON(url, function(response) {
    var statusHTML = '<ul class="bulleted">';
    $.each(response, function(index, employee) {
      if (employee.inoffice) { statusHTML += '<li class="in">'; }
      else { statusHTML += '<li class="out">'; }
      statusHTML += employee.name + '</li>';
    });
    statusHTML += '</ul>';
    $("#employeeList").html(statusHTML);
  }); // end getJSON
}); // end ready
Nicolas Wolf
Nicolas Wolf
11,607 Points
Nicolas Wolf
Nicolas Wolf
11,607 Points

Sounds like the JSON file is in the same directory as the widget, or at least a descending directory. Relative locations always look from the directory of the file they're called from.

If you're in a javascript file located in website/js/apps/ and you're trying to get to a file in website/data/users/ you'll have to go "up" in the directory structure (../) from the js/ directory to the website/ directory, then descend into data/users.

Wow, I said "directory" a lot...