Displaying JSON server response on client side without JQuery

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?

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);


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Secure Node.js, Express.js and PostgreSQL API using Passport.js

The comprehensive step by step tutorial on building secure Node.js, Express.js, Passport.js, and PostgreSQL Restful Web Service

Creating a RESTful Web API with Node.js and Express.js from scratch

In this article, I’ll show you step by step how to create a RESTful Web API with Node.js and Express.js by building a simple and useful Todo API. This article assumes you have basic javascript knowledge and terminal using capabilities.