jspページにチェックボックスを使ってJsonデータを表示するにはどうすればいいですか？

Question

私は基本的なウェブサイトを作成しています.2つのドロップダウンがあり、それはうまくいくはずです。最初のドロップダウンでは、DBからの選択クエリのデータが表示され、最初のドロップダウンJSONを使用して2番目のドロップダウン値を入力します。 JSON配列を使用して、index.jspページで解析しています。しかし、私はチェックボックスを使ってJSONデータを表示するのに助けが必要です。私のJSコードはJSONデータを表示するためにテーブルを使用していますが、チェックボックスが必要です。私はコーディングに新しいので、どんな助けもありがとう！ここで

は私のindex.jspです：

<div class="programFields"> 
    <label>Pick a client</label> 
    <select id="clientName" name="clientDropDown" onchange="ref()"> 
    <% while(r.next()){%> 
    <option><%= r.getString("acode")%> 
    </option> 
    <%} %> 
    </select> 
    <p id="demo"></p> 
</div> 

とindex.jspの中に私のJS：

function ref() { 
    var code = document.querySelector("select[name=clientDropDown]").value; 
    var x, myObj, txt = '' ; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState === 4 && this.status === 200) { 
      myObj = JSON.parse(this.responseText); 
      txt += "<select>" 
      for (x in myObj) { 
       txt += "<option>" + myObj[x].payor_id + "</option>"; 
      } 
      txt += "</select>" 
      document.getElementById("demo").innerHTML = txt; 
     } 
    } 

    xhttp.open("POST", "Server.jsp", true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send("code=" + code); 
} 

Answer 1

ちょうどあなたが挿入するHTML変更：

// For the demo, myObj is already received and parsed 
 
var myObj = [ 
 
    {name: "Ted",  id: 0, friend: false}, 
 
    {name: "Chandler", id: 1, friend: true }, 
 
    {name: "Monica", id: 2, friend: true }, 
 
    {name: "Phoebe", id: 3, friend: true }, 
 
    {name: "Donald", id: 4, friend: false}, 
 
    {name: "Rachel", id: 5, friend: true }, 
 
    {name: "Ross",  id: 6, friend: true }, 
 
    {name: "Joey",  id: 7, friend: true } 
 
]; 
 

 
var txt = ""; 
 

 
for (var x in myObj) { 
 
    txt += '<input type="checkbox" value="' + myObj[x].id + '" ' 
 
     + (myObj[x].friend ? 'checked' : '') + '>' 
 
     + myObj[x].name 
 
     + '<br />'; 
 
} 
 

 
document.getElementById("demo").innerHTML = txt;

<h3>My friends</h3> 
 
<div id="demo"></div>

を