Menu
I have managed to present JSON data in an HTML table as shown below :
$("#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>Now, I am getting the JSON data in a slightly different format. The first format was :
{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}
and now it is :
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
So, in a new snippet I tried to parse the data from the JSON data without success :
$("#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>Case 1 :
I might have to make a small change to make the parsing successful but I am pretty stuck here.
Case 2 :
A second though I had was to convert the JSON format to the one used in the first snippet. So, from a multidimensional JSON, I will have a flat one.
Convert this
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
to
{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}
Am I missing something? And if it is not possible to change the current script, is it worthy trying to convert the JSON format?
985
I'm assuming that the headers are fixed. If they are, it's just a simple case of looping through all of the rows and pushing them as a new object.
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);As requested in the comments, if the headers are dynamic and may change in the future, you can use the below code.
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);If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
