Невозможно отобразить Json Response in input checkbox tag

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

Может ли кто-нибудь вести меня, как это сделать.

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

<!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>

Json Return - Там будет много данных. Но я показываю немного.

[{ 
"Test_Name": "FOOD", 
"Brand": "Test" 
}, 
{ 
"Test_Name": "HOME", 
"Brand": "Test" 
}]

источник

2016-12-24 learningmode

Вставлять с JQuery только (далее here) - пометить флажки из значений в вашем 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>

источник

2016-12-24 10:42:54 Teknotica

Привет, я обновил свой код. Можете ли вы проверить, что в этом плохого. Я не могу показать этот флажок. – learningmode

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

Пару очков:

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

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

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

Прокси-сервер - это просто обработчик 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>

источник

2016-12-24 16:18:23 Silas

Невозможно отобразить Json Response in input checkbox tag

ответ

Смежные вопросы