Question

我设法在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"}, {Month:"February", numbers:"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格式？

Answer 1

我假设标题是固定的。如果它们是，则只是循环遍历所有行并将它们作为新对象推送的简单情况。

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);

根据评论中的要求，如果标题是动态的，将来可能会更改，您可以使用以下代码。

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);

使用JS在HTML表格中呈现JSON数据

1 个答案: