我正在尝试使用JSON数据填充HTML表。我正在使用dynatable
插件。(没有具体的理由使用它。只是我碰到了这个&发现它的UI是吸引人的)。
服务器返回的JSON数据样本
[{"DATE":"2015-12-15","TYPE":"AAA","NAME":"asdasd"},{"DATE":"2015-12-15","TYPE":"BBB","NAME":"dsfsdfsdfsdf"},{"DATE":"2015-12-15","TYPE":"AAA","NAME":"reterter"},{"DATE":"2015-12-15","TYPE":"CCC","NAME":"ertertertert"}]
以下代码 -
function jsDataPlot(chartProps) {
// Get the array from the element:
var graphPropsStore = chartProps;
// Loop through the array with the jQuery each function:
$.each(graphPropsStore, function (k, graphPropsStoreProperty) {
// The makeCall function returns a ajaxObject so the object gets put in var promise
var dbResAjx = getResultFromSql(k);
// Now fill the success function in this ajaxObject (could also use .error() or .done() )
dbResAjx.success(function (response) {
console.log(response);
// myRecords = JSON.parse(response.text());
$('#tableIdToFill').dynatable({
dataset: {
records: $.parseJSON(response)
}
});
});
dbResAjx.error(function (response) {
console.log(response);
});
});
}
我遇到的问题是,JSON响应很难从服务器返回,该表正在使用undefined
这是表格的HTML代码
<body id="htmlDataTable">
<table id="tableIdToFill" class="display" cellspacing="0" width="98%">
<thead>
<tr>
<th>DATE</th>
<th>TYPE</th>
<th>NAME</th>
</tr>
</thead>
<tfoot>
<tr>
<th>DATE</th>
<th>TYPE</th>
<th>NAME</th>
</tr>
</tfoot>
</table>
</body>
我正在关注文章here
答案 0 :(得分:1)
问题是属性的名称,它们需要以小写字母开头。
var jsonData = `[
{
"date": "2015-12-15",
"type": "AAA",
"name": "asdasd"
},
{
"date": "2015-12-15",
"type": "BBB",
"name": "dsfsdfsdfsdf"
},
{
"date": "2015-12-15",
"type": "AAA",
"name": "reterter"
},
{
"date": "2015-12-15",
"type": "CCC",
"name": "ertertertert"
}
]`;
//console.log(jsonData);
var response = JSON.parse(jsonData);
console.log(response);
$('#tableIdToFill').dynatable({
dataset: {
records: response
}
});
请参阅此jsFiddle