Dynamic list creation from json results (using only domcore js) for ASP.NET MVC Tutorial 4.

getTodos.js

function getTodos(callback) {
    var request = new XMLHttpRequest();
    request.open("Get", "/api/Todo", true);
    request.onload = function() {
        console.log("Returned");
        if (request.error) {
            console.log(request.error);
        } else {
            var response = JSON.parse(request.responseText);
            console.log(response);
            callback(response);
        }
    };
    request.send();
}

function toggleClass(id) {
    console.log(id);
    console.log(this);
    var item = document.getElementById(id);
    var itemClass = item.getAttribute("class");
    var newClass = "";
    if (itemClass != "completed") {
        newClass = "completed";
    }
    item.setAttribute("class", newClass);
}

function displayData(todos) {
    var listTag = document.getElementById("todoList");
    for (var index in todos) {
        var todo = todos[index];

        var itemId = "todo" + index;
        var listItem = document.createElement("li");
        
        listItem.setAttribute("id", itemId);
        var checkBox = document.createElement("input");
        checkBox.setAttribute("type", "checkbox");
        checkBox.setAttribute("onclick", "toggleClass('" + itemId + "');");
        if (todo.Completed) {
            checkBox.setAttribute("checked", true);
        }

        listItem.appendChild(checkBox);

        var spanTitle = document.createElement("span");
        spanTitle.innerText = todo.Title;

        listItem.appendChild(spanTitle);
        listTag.appendChild(listItem);
    }
}

getTodos(displayData);