Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AJAX Basics (retiring) jQuery and AJAX The Office Status Project Revisited

Please help my code is not working.. What did I miss??

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

To facilitate a complete analysis, make a snapshot of your workspace and post the link to it here.

It might also help to elaborate a bit on what you mean by "not working".

5 Answers

Niki Molnar
Niki Molnar
25,575 Points

Hi Brian

A look at the Console usually gives you a clue and in this case will have probably told you that it couldn't find the json file.

If you've downloaded the project files, you'll need to change the url to:

var url = '../video4/data/employees.json';

(change video4 to whichever section you're in)

Hope that helps.

Niki

Niki Molnar
Niki Molnar
25,575 Points

Hi Steve

The issue you have is in the error "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." This means that you can't run it off a non-protocol page, like http://

You are running the file from file:///E:/Folder/Steve/Teamtreehouse/JS/jQuery/AJAX_Basics_Project_Files/AJAX_Basics_Project_Files/stage3/..../index.html rather than http://localhost or domainname/.../index.html

Chrome doesn't allow this for security.

You have two options:

1) Upload all the files to a directory on a website where you have access (but remember to change the path to the json file); or 2) Install MAMP or the like on your computer. MAMP is a free local web server, so you can access pages you create in C:/MAMP/htdocs as http://localhost

https://www.mamp.info/

Good luck!

Niki

thanks both of you

Tuan Phan
Tuan Phan
10,825 Points

Hi Niki, I change the directory as you guide. I can find the right path.

But the browser still notifies an error, I tried to compare my code with Bryan but I do not find any clue...

Here is my code:

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

Here is the error:

"jquery-1.11.0.min.js:4 Failed to load file:///E:/Folder/Steve/Teamtreehouse/JS/jQuery/AJAX_Basics_Project_Files/AJAX_Basics_Project_Files/stage3/video3/data/employees.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

I googled around and they said, the directory need to be http or https. In other words, I need to set up some host/sever which I have no clue to start.

Is it right? Or there is something wrong with my code?

Tuan Phan
Tuan Phan
10,825 Points

Hi Niki, thank you a lot. You just save my day!