如何在表中显示json响应以及用于在jquery中选择特定列值的复选框

Question

在调用Web服务后，我以下面指定的格式获取Json响应

[{
    "1": {
      "value": 0.9354149103164673
    },
    "key": 233558146445,
    "doc_count": 1
  },
  {
    "1": {
      "value": 0.9309101700782776
    },
    "key": 233558143870,
    "doc_count": 1
  },
  {
    "1": {
      "value": 0.929838240146637
    },
    "key": 233558833452,
    "doc_count": 1
  }
]

我希望在表格中显示"Key"中存在的数据以及复选框，当我点击复选框时，它应该选择键值，此表应该在单击按钮后显示为弹出窗口。< / p>

这是我到目前为止所得到的

Answer 1

如果我理解正确，这可能会帮助你开始

＆＃13;

＆＃13;

var response = [{
    "1": {
      "value": 0.9354149103164673
    },
    "key": 233558146445,
    "doc_count": 1
  },
  {
    "1": {
      "value": 0.9309101700782776
    },
    "key": 233558143870,
    "doc_count": 1
  },
  {
    "1": {
      "value": 0.929838240146637
    },
    "key": 233558833452,
    "doc_count": 1
  }
];
var responseTableHtml = '';
for (var i = 0; i < response.length; i++) {
  responseTableHtml = responseTableHtml + '<tr><td><input type="checkbox"></td><td>' + response[i].key + '</td></tr>';
}
$('#responseTable').find('tbody').html(responseTableHtml);
$('.responseTableAction').on('click', function() {
  var checkedCheckbox = $('#responseTable input[type="checkbox"]:checked');
  if (checkedCheckbox.length > 0) {
    alert(checkedCheckbox.parents('tr').find('td:nth-child(2)').html());
  } else {
    alert('pls check something');
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="responseTable">
  <thead>
    <tr>
      <th></th>
      <th>Key</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <td colspan="2"><button class="responseTableAction">View</button></td>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

var x = [{"1":{"value":"0.9354149103164673"},"key":"233558146445","doc_count":"1"},
{"1":{"value":"0.9309101700782776"},"key":"233558143870","doc_count":"1"},
{"1":{"value":"0.929838240146637"},"key":"233558833452","doc_count":"1"}];

var tab = document.getElementById("myTable");
x.forEach(function(v,k){
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  td.innerHTML = v.key;
  tr.appendChild(td);
  
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.name = "key";
  checkbox.value = v.key;
  checkbox.id = "id";
  tr.appendChild(checkbox);
  
  tab.appendChild(tr);
});

function checkValue(){
        	 var names = document.getElementsByName("key");
        	 names.forEach(function(v){console.log(v.value , v.checked);});
         };

＆＃13;

<table id="myTable" border="1px">

</table>

<input type="button" onclick="checkValue()" value="Check">

＆＃13;

＆＃13;

＆＃13;

你可以尝试这样的事情。

Answer 3

您可以提取密钥的数据，如以下示例所示

var rawData = [{"1":{"value":0.9354149103164673},"key":233558146445,"doc_count":1},
{"1":{"value":0.9309101700782776},"key":233558143870,"doc_count":1},
{"1":{"value":0.929838240146637},"key":233558833452,"doc_count":1}];

rawData.forEach(function(o) {
  $('#keys').append($('<li>').text(o.key));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="keys"></ul>

Answer 4

您也可以使用each（）方法

responseTableHtml=""
$.each( response, function( key, val ) {
responseTableHtml = responseTableHtml + '<tr><td><input type="checkbox"></td>
<td>' + val.key  + '</td><td><button class="responseTableAction">View</button>
</td></tr>';
});