JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

what's wrong with my code?

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { var employees = JSON.parse(xhr.responseText); var statusHTML = '<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();

1 Answer

Josh Olson
Josh Olson
13,062 Points

This piece of code:

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

You're setting the string equal to the <li> tags instead of adding them onto what you have. This erases what was previously written. So just use the += operator.

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

Additionally, you may want to look into markdown to make your post easier to read. This can help improve your chances of getting an answer.