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

Need help understanding var statusHTML = '<ul class="bulleted">';

Hey everyone,

I do not understand what var statusHTML = <ul class="bulleted">; does.

This comes in at about 4:00 in the video.

Dave says, "I'll create a variable to hold the HTML that the call back generates.".

Is the .bulleted pulled from anywhere else in this project?

Damian Andrews
Damian Andrews
9,475 Points

Hi Jennelle,

This is storing the ul as a variable called statusHTML. This isn't doing anything other than enabling you to type statusHTML in your callback instead of typing out <ul class="bulleted">

Hope that helps.

Gavin Ralston
Gavin Ralston
28,770 Points

Just to be clear, the variable statusHTML is in the callback function.

  $.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>';
    }); // end bullets
    statusHTML += '</ul>';
    $('#employeeList').html(statusHTML);
  }); // end getJSON

What it does by being set outside the each loop is only create one unordered list, which is what you want, then step into the loop and build each individual list item with the class it needs, then at the end append the single closing tag you need for your unordered list.

1 Answer

Just to expand on what Damian said, statusHTML is also building the ul list. You start with typing '<ul class="bulleted">' (which is a string) and then as you get each list item in the JSON data, you are constructing and appending those list items to that ul element by adding each list item to the variable. It is a way of dynamically adding in elements. :)

A neat experiment to try is initializing the variable statusHTML into the global scope (place the initial line: var statusHTML = '<ul class="bulleted">'; line outside of the function) and then go into your web console (if you have Chrome or Firefox) and type out "statusHTML". You'll see it has become a pretty long string consisting of list items. :)