入力チェックボックスタグでJson Responseを表示できません

ボタンクリック時に入力チェックボックスタグにJson Responseを表示しようとしています。しかし、私はそれを行うことができません。入力チェックボックスタグで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>

JSONに戻る - データがたくさんあるでしょう。しかし、私は少数を表示しています。 jQueryを使ってこだわり

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

出典

2016-12-24 learningmode

のみ（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

こんにちは私は自分のコードを更新しました。あなたは何が間違っているのpleseチェックできますか？チェックボックスを表示できません。 – learningmode

私はあなたが使用しているURLにアクセスすることはできませんので、私はLibrivox.orgのAPIを使用した例をあげる：

ポイント数：

1：DOM内部テキストを最初に取り込む必要はありません。戻り値はすでに使用可能です。

2：ネイティブXMLHTTPRequestを使用しているときにxブラウザの問題が表示されないため、理由がない限り（通常はパフォーマンス）、JQueryを使用する必要があります。

3：I と思う返品するアイテムごとにチェックボックスを表示しようとしています。これが私が示すものです。

使用されるプロキシは、リモートサーバーに要求を渡すための単純なC＃ハンドラです。したがって、クロスドメイン要求の問題にぶつからないようにします。次の呼び出しから直接返されるレスポンスは正確です：

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

のjQueryを自動的にJavaScriptオブジェクトに返されるJSON文字列に変換します - あなたがにconsole.log（）ステートメントを使用して見ることができます。

コードはリモートサーバー（Librivox）にリクエストを行い、データ（authors）のリストをJSON文字列として返します。 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を表示できません

答えて

関連する問題