Scribd
Upload
7 views3 pages

Program 17

The document provides a JavaScript program that demonstrates how to convert JSON data into an HTML table. It includes a simple web page structure with a button that, when clicked, constructs a table from a predefined JSON list. The script dynamically generates table headers and rows based on the JSON data provided.

Uploaded by

vinayrock119
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views3 pages

Program 17

The document provides a JavaScript program that demonstrates how to convert JSON data into an HTML table. It includes a simple web page structure with a button that, when clicked, constructs a table from a predefined JSON list. The script dynamically generates table headers and rows based on the JSON data provided.

Uploaded by

vinayrock119
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

PROGRAM 17

AIM: - How to convert JSON data to a html table using JavaScript?

<html>

<head>

<title>

</title>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

</script>

</head>

<body style="text-align:center;" id="body">

<h1 style="color:blue;"> Sreyas Engg College </h1>

<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">

</p>

<button onclick="constructTable('#table')">

click here

</button>

<br><br>

<table align="center" id="table" border="1">

</table>

<script>

let el_up = document.getElementById("GFG_UP");

let list = [

{ "col_1": "val_11", "col_3": "val_13" },

{ "col_2": "val_22", "col_3": "val_23" },

{ "col_1": "val_31", "col_3": "val_33" }

];

el_up.innerHTML =
JSON.stringify(list[0]) + "<br>"

+ JSON.stringify(list[1]) + "<br>"

+ JSON.stringify(list[2]);

function constructTable(selector) {

// Getting the all column names

let cols = Headers(list, selector);

// Traversing the JSON data

for (let i = 0; i < list.length; i++) {

let row = $('<tr/>');

for (let colIndex = 0; colIndex < cols.length; colIndex++) {

let val = list[i][cols[colIndex]];

// If there is any key, which is matching

// with the column name

if (val == null) val = "";

row.append($('<td/>').html(val));

// Adding each row to the table

$(selector).append(row);

function Headers(list, selector) {

let columns = [];

let header = $('<tr/>');

for (let i = 0; i < list.length; i++) {

let row = list[i];

for (let k in row) {

if ($.inArray(k, columns) == -1) {


columns.push(k);

// Creating the header

header.append($('<th/>').html(k));

// Appending the header to the table

$(selector).append(header);

return columns;

</script>

</body>

</html>

OUTPUT:-

You might also like