Displaying JSON information in an HTML table with JavaScript

Question

Displaying JSON information in an HTML table with JavaScript

I successfully displayed JSON data in an HTML table. Here is the snippet I used:

$("#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>

Recently, I received the JSON data in a new format. Previously it was structured as follows:

{Month:"January", numbers:"124010"},
 {Month:"February", numbers:"545010"}

Now, the format is different :

{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}

I attempted to parse this new data without success using the following code snippet:

$("#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 encountered difficulties parsing the new JSON format. Any suggestions for resolving this issue?

Case 2 :

Consider converting the multidimensional JSON format to the one used in the initial snippet. From a multidimensional JSON structure to a flat one.

Conversion steps:

{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}

to

{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}

If modifying the current script is not feasible, would it be worthwhile trying to convert the JSON format?

javascript html css json

Answer 1

Answer №1

If the headers remain constant, you can easily loop through all rows and create new objects from them.

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

To handle dynamic headers that may change in the future as per the comments, 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);

Answer 2

If the headers remain constant, you can easily loop through all rows and create new objects from them.

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

To handle dynamic headers that may change in the future as per the comments, 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);

Displaying JSON information in an HTML table with JavaScript

Answer №1

Similar questions

How can I customize the appearance of a checkbox button in JavaFX?

Creating a distinctive property with the standard settings

Image caption dynamically updated to match thumbnail caption using jQuery upon click event

Can transclusion be achieved while maintaining the directive's scope in Angular?

Error encountered while deserializing Json in C#: Null class

Concatenate strings in Angular 5 only when the specified field is present in the HTML

Guide on retrieving JSON information within an array utilizing a loop function

Can you provide a solution in C# for traversing through article elements within the HTML of a website?

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

Align the image and caption at the center in Bootstrap 4

Managing numerous requests simultaneously without causing one to delay or block the others

Having trouble with Vuex actions. Getting an error message that says "Failed to signInWithEmailAndPassword: The first argument "email" must be a valid string."

Creating a dynamic Bootstrap 4 hover effect for collapsible elements with numerous items

Ensure that each component in Angular2 includes a separate JavaScript file

Spacing between navigation items

Unable to construct React/Next project - identified page lacking a React Component as default export (context api file)

What is the best way to add spacing between the fields within a Bootstrap 4 form row that spans across 2 rows when viewed on small displays?

What is the most effective method for implementing a background repeated image in Foundation 4 framework?

Discovering how to retrieve data from a JSON response in Postman that includes a key with a period in it

What is the correct method to sanitize the data obtained from a text area before inserting it back into the same text area?