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

Posted by Brian Johnson
.a{fill-rule:evenodd;}techdegree seal-36
Brian Johnson
Front End Web Development Techdegree Graduate 20,818 Points

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
231,275 Points
Steven Parker
Steven Parker
231,275 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,698 Points
Niki Molnar
Niki Molnar
25,698 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,698 Points
Niki Molnar
Niki Molnar
25,698 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

Brian Johnson
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Brian Johnson
Front End Web Development Techdegree Graduate 20,818 Points
Brian Johnson
.a{fill-rule:evenodd;}techdegree seal-36
Brian Johnson
Front End Web Development Techdegree Graduate 20,818 Points

thanks both of you

Tuan Phan
Tuan Phan
10,825 Points
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
Tuan Phan
Tuan Phan
10,825 Points

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