[英]Create HTML table using jQuery and JSON array (Rows Error undefined)
Html:
<table id="example" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
使用以下指令 jquery
<script>
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.getJSON("http://localhost:8089/projectw/ServletJSON", function (data) {
var e= "";
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
e += '<tr>';
e += '<td>' + value.ag + '</td>';
e += '<td>' + value.pa + '</td>';
e += '<td>' + value.ex + '</td>';
e += '<td>' + value.em + '</td>';
e += '<td>' + value.at + '</td>';
e += '<td>' + value.ct + '</td>';
e += '<td>' + value.num_ex + '</td>';
e += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#example').append(e);
});
});
</script>
servlet 中的 json 示例:
{
"JsonTest": [
{
"ag": "RAX",
"pa": "pa 1",
"ex": "RXTT",
"em": "ME",
"at": 1,
"ct": 0,
"num_ex": "1"
},
{
"ag": "TOM",
"pa": "pa 2",
"ex": "TOCC",
"em": "MB",
"at": 0,
"ct": 0,
"num_ex": "2"
}
]
}
观察 如果我命令显示 json 文本(
var req = new XMLHttpRequest();
req.open('GET', 'http://localhost:8089/projectw/ServletJSON', true);
req.send();
req.onload = function(){
var json=JSON.parse(req.responseText);
document.getElementsByClassName('message(class of table example)')[0].innerHTML = JSON.stringify(json)
),我获得了成功,但没有填充表。 我该如何调整呢? 谢谢你们 !
预期的行将填充 json 个值,控制台中没有错误。
如果您在代码中添加一个简单的console.log()
来显示循环中的key
和value
,那么问题就很明显了:
$.each(data, function (key, value) {
console.log('key is', key, 'value is', value);
// ... your code ...
});
控制台显示:
键是 JsonTest 值是 [ { "ag": "RAX", "pa": "pa 1", ....等
看看你的 JSON object 很明显 - 你只有 1 个顶级键JsonTest
,你所有的真实数据都嵌套在它下面。 您想要迭代data.JsonTest
,而不是data
。 这是一个已修复该错误的简化工作示例:
let data = { "JsonTest": [ { "ag": "RAX", "pa": "pa 1", "ex": "RXTT", "em": "ME", "at": 1, "ct": 0, "num_ex": "1" }, { "ag": "TOM", "pa": "pa 2", "ex": "TOCC", "em": "MB", "at": 0, "ct": 0, "num_ex": "2" } ] }; $(document).ready(function () { populateTable(data); function populateTable(data) { var e= ""; let jsontest = data.JsonTest; // ITERATING THROUGH OBJECTS $.each(jsontest, function (key, value) { console.log('key is', key, 'value is', value); //CONSTRUCTION OF ROWS HAVING // DATA FROM JSON OBJECT e += '<tr>'; e += '<td>' + value.ag + '</td>'; e += '<td>' + value.pa + '</td>'; e += '<td>' + value.ex + '</td>'; e += '<td>' + value.em + '</td>'; e += '<td>' + value.at + '</td>'; e += '<td>' + value.ct + '</td>'; e += '<td>' + value.num_ex + '</td>'; e += '</tr>'; }); //INSERTING ROWS INTO TABLE $('#example').append(e); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="example"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> </tr> </thead> <tbody> </tbody> </table>
您确实需要学习进行基本调试 - 使用控制台是编写 Javascript 的第一步。
在 SO 指南下注意我认为这个问题应该被认为是一个错字,它不太可能对未来的访问者有用。 我已投票关闭拼写错误。
谢谢,我修改了信息,得到了正确的结果:
$(document).ready(function() {
// FETCHING DATA FROM JSON URL
$.getJSON("http://localhost:8089/projectw/ServletJSON", function (data) {
var e= "";
let jsonTest= data.jsonTest;
});
});
我相信它可以帮助其他开发者,因为该论坛包含更多问题 JSON 文件和少数使用 URL 的问题!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.