CODEWITHSUNDEEP
javascripthtmlcssjson
Datacrawler
Datacrawler

Reputation: 2876

Present JSON data in HTML table using JS

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?

Upvotes: 3

Views: 767

Answers (1)

Toby Mellor
Toby Mellor

Reputation: 8205

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);

Upvotes: 4

Related Questions