My alternative solution without typing HTML

Question

const ul = document.createElement("ul"); ul.className = "bulleted";

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () { if (xhr.readyState === 4) { var employeesList = JSON.parse(xhr.responseText);

employeesList.forEach((employee) => {
  const li = document.createElement("li");

  li.className = employee.inoffice ? "in" : "out";
  li.textContent = employee.name;
  ul.appendChild(li);
});

document.getElementById("employeeList").appendChild(ul);

} };

xhr.open("GET", "data/employees.json"); xhr.send();

Answer 1 · 2021-03-15T14:23:06Z

March 15, 2021 2:23pm

There's an error since the "ul" element is not yet created. JavaScript returns a "null" error when appending it to the parent div element. Or I just did something wrong.

Anyway, the command for setting the class name is pretty neat! No more ugly if statement(s)!!

Answer 2 · 2021-08-12T15:54:07Z

August 12, 2021 3:54pm

You have to move the <script src="js/widget.js"></script> down from the <head> section to right above the closing </body> tag. This will fix the error Billy is referring to. Wow...Treehouse really needs to update this particular course :P

Answer 3 · 2021-09-23T12:57:18Z

September 23, 2021 12:57pm

I considered doing something similar but instead did the following which I guess is more apt for folks that are still uncomfortable with ternary operators:

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        let employees = JSON.parse(xhr.responseText);
        let ul = document.createElement('ul');
        document.getElementById('employeeList').insertAdjacentHTML('afterbegin', '<ul class="bulleted">');
        for(let i = 0; i<employees.length; i++){
            let employee = document.createElement('li');
            employee.innerHTML = `${employees[i].name}`;
            if(employees[i].inoffice === true){
                employee.classList.add('in');
            } else {
                employee.classList.add('out');
            };
            document.querySelector('.bulleted').appendChild(employee);
            }
    }
};
xhr.open('GET', 'data/employees.json');
xhr.send();

Answer 4 · 2022-02-08T02:06:31Z

February 8, 2022 2:06am

Nice! My solution turned out very similar. I just separated the status determination into a separate function.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    var employees = JSON.parse(xhr.responseText);
    // Select appropriate element to insert list.
    const aside = document.getElementById('employeeList');
    // Create the list and append.
    const employeeList = createList(employees);
    aside.appendChild(employeeList);
  };
};
xhr.open('GET', 'data/employees.json');
xhr.send();


function getStatus(employee) {
      // Returns 'in' or 'out' based on 'inoffice' property.
      // Return value assigned to li class attribute.
  if (employee.inoffice === true) {
    return 'in';
  } else {
    return 'out';
  };
};


function createList(employees) {
  // Create unordered list.  
  const ul = document.createElement('ul')
  // Loop through parsed JSON.
  for (let employee of employees) {
    // Create list item.
    const li = document.createElement('li')
    li.textContent = employee.name;
    li.className = getStatus(employee);
    ul.appendChild(li);
  };
  // Assign ul class attribute and return element.
  ul.className = 'bulleted';
  return ul;
};

Welcome to the Treehouse Community

Looking to learn something new?

Marco Ricci

Marco Ricci

My alternative solution without typing HTML

4 Answers

Billy Gragasin

Billy Gragasin

Daniel Ahn

Daniel Ahn

Sarai Vasquez Mariñez

Sarai Vasquez Mariñez

Andre Hammons

Andre Hammons