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