JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Robert Leonardi
Robert Leonardi
17,151 Points

Alternative solution to Employee List

Please don't hesitate to comment or suggest. Thanks

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4){
        if(xhr.status === 200 ){
            let employees = JSON.parse(xhr.responseText);
            let add_ul = document.createElement("ul");
            add_ul.className = "bulleted";
            document.getElementById("employeeList").append(add_ul);
            employees.forEach(function(employee){
                let add_li = document.createElement("li");
                add_li.innerText = employee["name"];
                if(employee["inoffice"] == true){add_li.className="in"}else{add_li.className="out"};
                add_ul.append(add_li);
            });
        } else {
            alert("Error "+xhr.status+" due to "+xhr.statusText);
        }
    }
};
xhr.open('GET','data/employees.json');
xhr.send();

1 Answer

ywang04
ywang04
6,736 Points

The logic is the same. You use DOM to manipulate. What I am wondering is which way is better in terms of performance.