Present JSON data in HTML table using JS

Question

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?

The second format is not a JSON

Rupesh Jain
– Rupesh Jain

2017-04-27 17:36:48 +00:00
Commented Apr 27, 2017 at 17:36 — Rupesh Jain
– Rupesh Jain, Commented Apr 27, 2017 at 17:36

Toby Mellor · Accepted Answer · 2017-04-27 16:41:33Z

4

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

edited Apr 27, 2017 at 16:41

answered Apr 27, 2017 at 15:43

Toby Mellor

8,2078 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Datacrawler Over a year ago

Awesome! Do you have a version when the headers are not fixed? The query might differ. I might be able to pull more things (for example "Name" and "number 2").

Toby Mellor Over a year ago

@ApoloRadomer Give the second snippet a go. Please don't forget to mark the correct answer :)

Datacrawler Over a year ago

Mellor I never forget :)

Datacrawler Over a year ago

The updated snippet did not work in the HTML table output. The console works fine. jsfiddle.net/radomer/hp7p330y/

Toby Mellor Over a year ago

@ApoloRadomer I'm guessing it's because I've added an extra column in your data as an example that it supports dynamic columns. Replace unformatted with your original data,

var unformatted = {     "headers": [         "Month",         "numbers"     ],     "rows": [         [             "January",             124010         ],         [             "February",             545010         ]     ] };

|

Collectives™ on Stack Overflow

Present JSON data in HTML table using JS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related