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 Trung Vuong
Trung Vuong
3,956 Points

What is the difference between the number of variables in callback function?Also how can I use $(this) to replace it

In the Office Status Project video,the callback functions in the get() and each() functions has different number of variables.

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

The ready function is blank,get has 1 andeach has 2 variables. Everything worked fine but when I changed 

$.each(response,function(randomPage,employee)

into

$.each(response,function(employee)

the list was all out/unidentified . The same thing when I changed 

$response.each(function(index,employee)

the list didn't show up or 

$.each(response,function(){
      if($(this).inoffice===true){
        statusHTML+='<li class="in">';
      }

all unidentified/out

Sorry for the long questions,I skipped through part of the jquery track so I still don't understand .

1 Answer

Kenneth Brown
Kenneth Brown
14,897 Points

I am no expert and this is the first question I have answered, but I think I have an answer for you.

$.get(url, data, callback_function, dataType)

The $.get() function can accept four parameters (variables); however, only two of them are required for this example. The url tells jQuery where to grab the data and the callback function tells jQuery what you want to do with the data that jQuery has retrieved. The data parameter, is only needed if you want to send data to the server. The dataType parameter will be guessed by jQuery if it is not specified.

$.each(object/array, callback_function)

The $.each() function iterates over an object or array. As such, it needs to keep track of where it is by using an index (the first parameter) in the callback function. In other words, you need two parameters for the callback function. I believe that is the cause of your issue when you switched from function(randomPage,employee) to function(employee):

See my solution for resolving the above problems and using 'this'

$(document).ready(function () {
  var url = "../data/employees.json";

  $.getJSON(url, function (response) { 
    var statusHTML = '<ul class="bulleted">';

    $.each(response, function (index, employee) {
      if (this.inoffice === true) {
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      } // end if
      statusHTML += this.name + '</li>';
    }); // end each loop

    statusHTML += '</ul>';
    $('#employeeList').html(statusHTML);  
  }); // end getJSON
}); // end ready

Sources:

http://api.jquery.com/jQuery.each/

http://api.jquery.com/jQuery.getJSON/

Trung Vuong
Trung Vuong
3,956 Points

Really thank you,I had hours of frustration because of this.