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 Jennelle Barajas
Jennelle Barajas
5,317 Points

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
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
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

Marcus Parsons
Marcus Parsons
15,719 Points

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. :)