如何将 JSON 数据转换为制表符 table
How to convert JSON data to Tabulator table
我有一些 JSON 数据需要在 Tabulator table 中使用。
制表符中的简单示例。
http://tabulator.info/docs/4.2/quickstart 我必须转换 JSON,但我正在努力寻找一个动态解决方案,假设我有一个带有键值的额外键,它仍然可以与制表符 table 一起使用。这是我的 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 文件的 link,checking1.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" 键名进行硬编码。
回答有关转换 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 包含您要获取的文档数组。
此代码假设数据中的所有元素都具有相同的长度数组。
我有一些 JSON 数据需要在 Tabulator table 中使用。
制表符中的简单示例。 http://tabulator.info/docs/4.2/quickstart 我必须转换 JSON,但我正在努力寻找一个动态解决方案,假设我有一个带有键值的额外键,它仍然可以与制表符 table 一起使用。这是我的 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 文件的 link,checking1.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" 键名进行硬编码。
回答有关转换 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 包含您要获取的文档数组。 此代码假设数据中的所有元素都具有相同的长度数组。