How to convert json data into html table?

by darrion.kuhn , in category: HTML & CSS , a year ago

How to convert json data into html table?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by mallory_cormier , a year ago

@darrion.kuhn 

You can convert JSON data into an HTML table using JavaScript. Here is an example code snippet that demonstrates how to do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <title>JSON to HTML Table</title>
</head>
<body>

<div id="table-container"></div>

<script>
    // Example JSON data
    var jsonData = [
        { name: "John", age: 30, city: "New York" },
        { name: "Alice", age: 25, city: "San Francisco" },
        { name: "Bob", age: 35, city: "Los Angeles" }
    ];

    // Create a function to convert JSON data into an HTML table
    function jsonToHtmlTable(data) {
        var table = '<table border="1">';
        
        // Create table headers
        table += '<tr>';
        for (var key in data[0]) {
            if (data[0].hasOwnProperty(key)) {
                table += '<th>' + key + '</th>';
            }
        }
        table += '</tr>';

        // Fill in table rows with data
        data.forEach(function(item) {
            table += '<tr>';
            for (var key in item) {
                if (item.hasOwnProperty(key)) {
                    table += '<td>' + item[key] + '</td>';
                }
            }
            table += '</tr>';
        });

        table += '</table>';
        return table;
    }

    // Display the HTML table on the webpage
    document.getElementById('table-container').innerHTML = jsonToHtmlTable(jsonData);
</script>

</body>
</html>


This code snippet creates an HTML table from the JSON data provided in the jsonData variable. It dynamically generates table headers and fills in the rows with the JSON data. Finally, it displays the HTML table in the table-container div on the webpage.

Related Threads:

How to convert raw json into the html table?
How to convert json to html using php?
How to convert json to html using php?
How to convert nested json object into a mysql table?
How to display text file data in html table?
How to get html from json data using mustache?