Отображение ответа сервера JSON на стороне клиента без JQuery

Question

Я пытаюсь создать функцию, которая получает ответ сервера (JSON) и отображает информацию из JSON в списке на веб-странице без использования JQuery. Как это возможно?

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

С почтальоном я получаю следующее тело "GET":

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

Вывод только для презентаций

Проще говоря, я хочу добиться следующего, но без использования 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);

Answer 1

Если я понимаю ваш вопрос, вы хотите использовать "innerHtml", чтобы разместить свой ответ json внутри html-страницы.

Справка:

javascript - Использование innerHTML для отображения данных JSON / объекта в определенном div - Переполнение стека

JSON XMLHttpRequest

Answer 2

Вам не нужно использовать заголовок запроса Content-type. Вместо этого между открытием XHR и его отправкой вы должны установить ajax.responseType = 'json' согласно этой документации: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType

Без установки responseType тип возврата по умолчанию - простой текст, так что вы также можете оставить его как есть и просто добавить JSON.parse в ваш обратный вызов, чтобы преобразовать строку JSON в объект ... но зачем что когда responseType существует? : D