Блог

Главная - Вопросы по программированию - Как преобразовать данные JSON в таблицу Tabulator

Как преобразовать данные JSON в таблицу Tabulator

#javascript #json #tabulator

#javascript #json #табулятор

Вопрос:

У меня есть некоторые данные JSON, которые мне нужно использовать в таблице Tabulator.

Простой пример здесь из tabulator. http://tabulator.info/docs/4.2/quickstart Я должен преобразовать JSON, но изо всех сил пытаюсь найти динамическое решение, где, скажем, если бы у меня был дополнительный ключ со значениями ключей, он все равно работал бы с таблицей tabulator. Вот мои данные 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, checking1.js имеет src=»{{url_for(‘static’, filename=’js/checking1.js ‘)}}»>

Любая помощь была бы с благодарностью принята, поскольку я боролся с этим в течение нескольких часов, пытаясь выполнить преобразование из JSON в вышеуказанную жестко закодированную версию. Я пробовал с циклом for, но продолжали возникать проблемы.

Пример того, как я собирал свои данные JSON из http://127.0.0.1:5000/broker_data

 $.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».

Комментарии:

1. Вам все еще нужна дополнительная информация или приведенный ниже ответ помог? Если у вас все еще возникают проблемы, оставьте комментарий, чтобы объяснить, что еще вам нужно.

2. Привет, Джеррен, извини за поздний ответ. Мне удалось обойти свою проблему, создав структуру var tabledata на Python, а затем отправить ее в формате jsonify с помощью Flask, но спасибо вам за ваш ответ! Высоко ценится 🙂

Ответ №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 содержит массив документов, которые вы пытаетесь получить.
Этот код предполагает, что все элементы в данных имеют одинаковую длину массива.