我已经设法在 HTML 表格中显示 JSON 数据，如下所示:
$("#example-table").tabulator({
height:"300px",
fitColumns:true,
tooltips:true,
columns:[
{title:"Month", field:"Month", sorter:"string"},
{title:"Numbers", field:"numbers", width:400, sorter:"string"},
],
});
var sampleData= [
{Month:"January", numbers:"124010"},
]
$("#example-table").tabulator("setData", sampleData);
$(window).resize(function(){
$("#example-table").tabulator("redraw");
});<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.css">
<script type="text/javascript" src="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>现在，我得到的 JSON 数据格式略有不同。第一种格式是:
{Month:"January", numbers:"124010"},
{月份:“二月”，数字:“545010”}
现在是:
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
所以，在一个新的片段中，我尝试从 JSON 数据中解析数据，但没有成功:
$("#example-table").tabulator({
height:"300px",
fitColumns:true,
tooltips:true,
columns:[
{title:"Month", field:"Month", sorter:"string"},
{title:"Numbers", field:"numbers", width:200, sorter:"string"},
],
});
var data= {"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
var finaldata = [];
for (var i = 0; i < data.rows.length; i++) {
finaldata.push(data.rows[i][1])
}
$("#example-table").tabulator("setData", finaldata);
$(window).resize(function(){
$("#example-table").tabulator("redraw");
});<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.css">
<script type="text/javascript" src="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>案例 1:
我可能需要做一些小改动才能使解析成功，但我被困在这里了。
案例 2:
虽然我有第二个是将 JSON 格式转换为第一个片段中使用的格式。因此，从多维 JSON 中，我将得到一个平面的。
转换这个
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
到
{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}
我错过了什么吗？如果无法更改当前脚本，是否值得尝试转换 JSON 格式？
最佳答案
我假设标题是固定的。如果是，这只是循环遍历所有行并将它们作为新对象推送的简单情况。
var unformatted = {
"headers": [
"Month",
"numbers"
],
"rows": [
[
"January",
124010
],
[
"February",
545010
]
]
};
var formatted = [];
for (var i = 0; i < unformatted.rows.length; i++) {
var row = unformatted.rows[i];
formatted.push({
Month: row[0],
numbers: row[1]
});
}
console.log(formatted);根据评论中的要求，如果 header 是动态的并且将来可能会发生变化，您可以使用以下代码。
var unformatted = {
"headers": [
"Month",
"numbers",
"another_column"
],
"rows": [
[
"January",
124010,
"Hello"
],
[
"February",
545010,
"World!"
]
]
};
var formatted = [];
for (var i = 0; i < unformatted.rows.length; i++) {
var row = unformatted.rows[i],
newObject = {};
for (var j = 0; j < unformatted.headers.length; j++) {
newObject[unformatted.headers[j]] = row[j];
}
formatted.push(newObject);
}
console.log(formatted);关于javascript - 使用 JS 在 HTML 表中呈现 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43662167/