json 多table 分類 抓法
---Json--
{
"first":[
{"name":"張三","sex":"男"},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
{"name":"李梅","sex":"女"}
],
"first01":[
{"name":"張3","sex":"男"},
{"name":"李4","sex":"男"},
{"name":"王5","sex":"男"},
{"name":"李6","sex":"女"}
]
}
----Jscript ----
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jqxhr = $.getJSON("./data_json/data/data.json", function () {
console.log("success");
})
//如果有這檔案會印出success
//$.getJSON("./data_json/Resonator_json/tl8oh-63gm2.json", function (json) {
// alert("JSON Data: " + json.name);
//});
//讀出json屬性的值，name是KEY，根據自己KEY定義改
//debugger;
var info = document.querySelector('.info');
var str = "";
$.getJSON("./data_json/data/data.json", function (json_data) {
//var len = json_data.first.length; //first表資料比數
var len = json_data.first01.length; //first01表資料比數
if (len != 0) {
for (var i = 0; i < len; i++) {
//var content = '<tr>' + '<td>' + json_data.first[i].name + ' </td>' + '<td>' + json_data.first[i].sex + '</tr>';
var content = '<tr>' + '<td>' + json_data.first01[i].name + ' </td>' + '<td>' + json_data.first01[i].sex + '</tr>';
//console.log(content);
str += content;
};
} else {
var content = '<tr>' + '<td>Null</td>' + '<td>Null</td>' + '</tr>';
//console.log(content);
str += content;
}
info.innerHTML += str;
});
//將JSON印成字串
});
</script>
----------------Html-------
<table class="table">
<thead>
<tr>
<th scope="col">Classification</th>
<th scope="col"> Part No.</th>
</tr>
</thead>
<tbody class="info">
</tbody>
</table>
沒有留言:
張貼留言