如何将 JSON 数据转换为 Tabulator 表答案

【问题标题】：How to convert JSON data to Tabulator table如何将 JSON 数据转换为 Tabulator 表
【发布时间】：2019-07-28 08:34:07
【问题描述】：

我有一些 JSON 数据需要在 Tabulator 表中使用。

来自制表符的简单示例。 http://tabulator.info/docs/4.2/quickstart 我必须转换 JSON，但我正在努力寻找一个动态解决方案，例如，如果我有一个带有键值的额外键，它仍然可以与制表符一起使用。这是我的 JSON 数据。

{
  "Aspen_Premium": [
    279245, 
    945317, 
    118388
  ], 
  "Brokerage_Upfront": [
    825831, 
    141166, 
    507242
  ], 
  "Brokers": [
    "JLT", 
    "Willis", 
    "BMS"
  ]
}

我需要把它放在这样的 JavaScript 文件中。

var tabledata = [
    {id: 1, Aspen_Premium: 279245, Brokerage_Upfront: 825831, Brokers: "JTL"},    
    {id: 2, Brokerage_Upfront: 945317, Brokerage_Upfront: 141166, Brokers: "Willis"},
    {id: 3, Brokers: 118388, Brokerage_Upfront: 507242, Brokers: "BMS"},    
]


var table = new Tabulator("#broker-table", {
    height:205, 
    data:tabledata, 
    layout:"fitColumns", 
    columns:[ 
        {title:"Aspen_Premium", field:"Aspen_Premium", width:150},
        {title:"Brokerage_Upfront", field:"Brokerage_Upfront"},
        {title:"Brokers", field:"Brokers"},

    ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("Row " + row.getData().id + " Clicked!!!!");
    },
});

我的 HTML 很简单：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Check 1</title>

<link href="https://unpkg.com/tabulator-tables@4.2.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.2/dist/js/tabulator.min.js"></script>

<script   src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>

</head>
<body>


<div id="broker-table"></div>

<script type="text/javascript" src="{{url_for('static',filename='js/checking1.js')}}"></script>
</body>
</html>

我正在使用 Python Flask。因此，javascript 文件的链接 checks1.js 具有 src="{{url_for('static', filename='js/checking1.js')}}">

任何帮助都将不胜感激，因为我已经为此苦苦挣扎了几个小时，试图将 JSON 转换为上述硬编码版本。我尝试使用 for 循环，但一直遇到问题。

我如何从 http://127.0.0.1:5000/broker_data 获取 JSON 数据的示例

$.get("/broker_data").then(function(data){

    var columns = Object.keys(data);

    var tabledata = [];

    for(var i = 0; i < data[columns[0]].length; i++){


        tabledata.push({"id": i+1, "Aspen": data[columns[0]][i]})
    } console.log(tabledata);
});

以上内容并不理想，因为我必须对“Aspen”键名进行硬编码。

【问题讨论】：

您是否还需要其他信息或以下答案是否有帮助？如果您仍有问题，请发表评论以说明您还需要什么。
嗨，杰伦，抱歉回复晚了。我设法通过在 Python 中创建 var tabledata 结构来解决我的问题，然后使用 Flask 发送 jsonify 它，但感谢您的回答！非常感谢:)

标签： javascript json tabulator

【解决方案1】：

要回答有关转换 JSON 数据的部分，这可能会有所帮助。如果

var data = {
    'Aspen_Premium':[279245,945317,118388],
    'Brokerage_Upfront':[825831,141166,507242],
    'Brokers':['JLT','Willis','BMS']
};

一种将其转换为所需格式的方法：

[
    {id: 1, Aspen_Premium: 279245, Brokerage_Upfront: 825831, Brokers: "JTL"},    
    {id: 2, Brokerage_Upfront: 945317, Brokerage_Upfront: 141166, Brokers: "Willis"},
    {id: 3, Brokers: 118388, Brokerage_Upfront: 507242, Brokers: "BMS"},    
]

将是以下 javascript：

//This gets the length of the array in the first element
var numItems = data[Object.keys(data)[0]].length;

var desiredJSON = [];
for( var itemIndex = 0; itemIndex < numItems; itemIndex++){
  var doc = {};
  doc.id = itemIndex;
  for( dataElemIndex in data) {
    doc[dataElemIndex] = data[dataElemIndex][itemIndex];
  }
  desiredJSON.push(doc);
}

在此循环之后，desiredJSON 包含您尝试获取的文档数组。此代码假设 data 中的所有元素具有相同长度的数组。

【讨论】：