Present JSON data in HTML table using JS
I was able to represent JSON data in 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>
I am now receiving JSON data in a slightly different format. First format:
{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}
and now this:
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
So, in a new snippet, I tried to parse data from JSON data with no 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 need to make a small change to make the parsing successful, but I'm pretty stuck here.
Case 2:
Second, although I had to convert the JSON format to the one used in the first snippet. So from 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 worth trying to convert the JSON format?
source to share
I assume the headers are corrected. If so, this is just a simple case of iterating over all strings 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 pointed out in the comments, if the headers are dynamic and may change in the future, you can use the code below.
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);
source to share