Displaying JSON server response on client side without JQuery

I am trying to make a function that gets the server response(JSON) and displays the information from the JSON in a list on the webpage without using JQuery. How would that be possible?

filterGet: function () {
        var ajax = new XMLHttpRequest();
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4 && ajax.status==200)
        {

            var ul = document.getElementById("results");
            while(ul.firstChild){
                ul.removeChild(ul.firstChild);
            }

            //i am trying to get the JSON response from the server
            var array = ajax.response;



            var i;
            for(i=0;array.length;i++){

                var latitudeForm = array[i].Latitude;
                var longitudeForm = array[i].Longitude;
                var nameForm = array[i].TagName;
                var hashForm = array[i].HashName;

                var newli = document.createElement('li');
                newli.className = "tagListElements";
                newli.innerText = nameForm + "("  + latitudeForm + ","
                    + longitudeForm + ")" + hashForm;
                ul.appendChild(newli);
            }

        }
    }

    ajax.open('GET', "/test1" , true);
    ajax.setRequestHeader("Content-Type", "application/json");
    ajax.send();
}

With Postman i get the following “GET” body:

[
{
“Latitude”: “45.01379”,
“Longitude”: “4.390071”,
“TagName”: “Casel”,
“HashName”: “#begaiburje”
},
{
“Latitude”: “59.01379”,
“Longitude”: “7.390071”,
“TagName”: “Casel”,
“HashName”: “#ne”
}
]

The output is just for presentation purposes

Simply put I want to achieve the following but without the usage of JQuery:

var main = function() {
“use strict”;
var addTodosToList = function(todos) {
var todolist = document.getElementById(“todo-list”);
for (var key in todos) {
var li = document.createElement(“li”);
li.innerHTML = "TODO: " + todos[key].message;
todolist.appendChild(li);
}
};
$.getJSON(“todos”, addTodosToList);
}
$(main);


#javascript #node.js #ajax #express

3 Likes2.30 GEEK