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

Posted by Adam Urteaga
Adam Urteaga
19,503 Points

Only get last item in list to print to page and there is no styling to the bullet?

Looked at this too long and time to ask for help.

 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
  if(xhr.readyState === 4) {
 var employees = JSON.parse(xhr.responseText);
 var s tatusHTML = '<ul class="bulleted">';
 for (var i=0; i<employees.length; i += 1) {
   if (employees[i].inoffice === true) {
     statusHTML += '<li class="in">';
     } else {
       statusHTML = '<li class="out">';
   }
   statusHTML += employees[i].name;
   statusHTML += '</li>'; 
  }
  statusHTML += '</ul>';
 document.getElementById('employeeList').innerHTML = statusHTML;
}
};
 xhr.open('GET', 'data/employees.json');
 xhr.send();

Had everything going ok until the very end. The only li that populates is Zac and only with a standard black bullet, no CSS to style the red/green indicator. The CSS file is in the folder for the project. And we don't touch it in this video series. So the problem has to be with my code above, right?

1 Answer

Nathan Dalbec
Nathan Dalbec
17,111 Points

It seems you made a syntax typo in the conditional nested in your for loop

if (employees[i].inoffice === true) {
     statusHTML += '<li class="in">';
} else {
       statusHTML = '<li class="out">';
}

In the else conditional, you are using a regular assignment operator "=", instead of the addition assignment operator "+=", therefore

statusHTML = '<li class="out">';

should be changed to

statusHTML += '<li class="out">';

Also as an aside, in your code snippet you seem to have added a space in the declaration of your statusHTML variable.

Adam Urteaga
Adam Urteaga
19,503 Points

Ah. Thanks so much! The "+" was the difference. Get cross-eyed trying to find those typos. Much appreciated. The "s tatusHTML" was an issue with the copy/paste from WorkSpaces; had to play around with it get it to kick into a code block and must have thrown that extra space in doing that.