Невозможно отобразить ответ Json в теге флажка ввода

Я пытаюсь отобразить Json Response в теге флажка ввода при нажатии кнопки. Но я не могу этого сделать.

Кто-нибудь может подсказать мне, как это сделать.

Ниже приведен код -

   <!DOCTYPE html>
<html>
<body>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<label><input type="checkbox" name="test_name" value=""></label>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementsByName('test_name').innerHTML = JSON.stringify(this.responseText,undefined, 2).replace(/\\n/g, "").replace(/\\r/g, "")
                                                                                      .replace(/\\/g, "")
                                                                                      .replace(/^"/, "")
                                                                                      .replace(/"$/, "");
    var jsonobj =  JSON.parse(document.getElementsByName('test_name').innerHTML);

    for ( var i=0;i<jsonobj.length; i++) 
    {
         console.log(jsonobj[i].Newsletter_Name);

             var label = document.getElementsByName('test_name'); 
             console.log(label);
             label.value= jsonobj[i].Newsletter_Name;               
    }; 

    }
  };
  xhttp.open("GET", "https://members.s7.exacttarget.com/Pages/Page.aspx?QS=38dfbe491fab00ea764e20685ddf905a854eb2c63c649afb00651f16b30a4189&brand_code=PE", true);
  xhttp.send();

}

</script>

</body>
</html>

Возвращение Джсона - Будет много данных. Но я показываю мало.

[{
"Test_Name": "FOOD",
"Brand": "Test"
},
{
"Test_Name": "HOME",
"Brand": "Test"
}]
Источник

2 ответа

Я не могу получить доступ к URL-адресу, который вы используете, поэтому приведу пример с использованием API Librivox.org:

Пара моментов:

1: Вам не нужно сначала заполнять DOM innerText - возвращаемое значение уже доступно.

2: Если у вас нет веской причины (обычно производительности), вы должны использовать JQuery, как говорили другие, поскольку он скрывает проблемы с x-браузером при использовании собственного XMLHTTPRequest.

3: я думаю, что вы пытаетесь сделать флажок для каждого возвращенного элемента. Это то, что я покажу.

Используемый прокси - это просто обработчик C# для передачи запроса на удаленный сервер, поэтому я не сталкиваюсь с проблемами междоменных запросов. Ответ в точности совпадает с ответом следующего вызова:

https://librivox.org/api/feed/authors?format=json

JQuery автоматически преобразует возвращенную строку JSON в объект Javascript, который можно увидеть с помощью оператора console.log().

Код выполняет запрос к удаленному серверу (Librivox) и возвращает список данных (авторов) в виде строки JSON. Поскольку я передал тип 'json' в качестве ожидаемого возвращаемого типа, JQuery автоматически преобразует данные в пригодный для использования объект Javascript.

Остальная часть кода просто создает коллекцию флажков и добавляет к указанному элементу DOM.

Было бы просто прикрепить обработчики кликов к каждому флажку для дальнейшей обработки данных.

<!DOCTYPE html>
<html>
<body>
    <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>

<label><input type="checkbox" name="test_name" value=""></label>

<div id="test"><!-- Appending checkboxes here -->

</div>

<button type="button" id="loaddoc">Change Content</button>

<script>
var proxyUrl = "/proxy/proxy.aspx";

$(function(){
        $.ajax(proxyUrl + "?endpoint=api/feed/authors",{
            dataType:"json"
        }).complete(function(data){ 
            //log data:
            console.log(data);//big list of authors
            var dv = document.createElement("div");
            //build checkboxes...
            for(var a=0;a<data.responseJSON.authors.length;a++){
                var lbl = document.createElement("label");
                lbl.appendChild(document.createTextNode(data.responseJSON.authors[a].last_name));
                var chk = document.createElement("input");
                chk.setAttribute("type","checkbox");
                chk.setAttribute("name",data.responseJSON.authors[a].last_name);
                chk.setAttribute("value",data.responseJSON.authors[a].id);
                lbl.appendChild(chk);
                dv.appendChild(lbl);
            }
            //append to element:
            $("#test")[0].appendChild(dv);
        });
});
</script>
</body>
</html>
Источник

Придерживаясь только jQuery (подробнее здесь) - чтобы поставить галочки напротив значений в вашем JSON, вы можете сделать что-то вроде этого:

$.ajax({
    url: "https://testendpoint/",
    dataType: "json",
    success: function (response) {
        if (response) {
            // Tick checkboxes from JSON
            for (var i=0; i<json.length; i++) {
                $('#' + json[i].Newsletter_Name).prop('checked', true);
            }
        }
    }
});

Это предполагает, что ваши флажки выглядят примерно так:

<div>
    <input id="FOOD" type="checkbox" value="FOOD">
    <label for="Food">Food</label>          

    <input id="HOME" type="checkbox" value="HOME">
    <label for="Home">Home</label>
</div>
Источник
Другие вопросы по тегам