Dado un documento HTML que contiene datos JSON y la tarea es convertir datos JSON en una tabla HTML.
Enfoque 1:
- Tome el objeto JSON en una variable.
- Llame a una función que primero agregue los nombres de las columnas al elemento <tabla>. (Está buscando todas las columnas, que es UNION de los nombres de las columnas).
- Recorra los datos JSON y haga coincidir la clave con el nombre de la columna. Ponga el valor de esa clave en la columna respectiva.
- Deje la columna vacía si no hay ningún valor para esa clave.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert JSON data to a
html table using JavaScript ?
</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:green;" >
GeeksForGeeks
</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>
var el_up = document.getElementById("GFG_UP");
var 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 = "Click on the button to create "
+ "the table from the JSON data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
+ JSON.stringify(list[2]);
function constructTable(selector) {
// Getting the all column names
var cols = Headers(list, selector);
// Traversing the JSON data
for (var i = 0; i < list.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++)
{
var 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) {
var columns = [];
var header = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var row = list[i];
for (var 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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Almacene el objeto JSON en la variable.
- Primero ponga todas las claves en una lista.
- Cree un elemento <tabla>.
- Cree un elemento <tr> para el encabezado de la tabla.
- Visite la lista de claves y cree un <th> para cada valor e insértelo en el elemento <tr> creado para el encabezado.
- Luego, para cada entrada en el objeto, cree una celda e insértela en la fila en particular.
- Deje la columna vacía si no hay ningún valor para esa clave.
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert JSON data to a html
table using JavaScript/jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "GFG_FUN()">
click here
</button>
<br><br>
<table id="table" align = "center" border="1px"></table>
<script>
var el_up = document.getElementById("GFG_UP");
var list = [
{"col_1":"val_11", "col_2":"val_12", "col_3":"val_13"},
{"col_1":"val_21", "col_2":"val_22", "col_3":"val_23"},
{"col_1":"val_31", "col_2":"val_32", "col_3":"val_33"}
];
el_up.innerHTML = "Click on the button to create the "
+ "table from the JSON data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
+ JSON.stringify(list[2]);
function GFG_FUN() {
var cols = [];
for (var i = 0; i < list.length; i++) {
for (var k in list[i]) {
if (cols.indexOf(k) === -1) {
// Push all keys to the array
cols.push(k);
}
}
}
// Create a table element
var table = document.createElement("table");
// Create table row tr element of a table
var tr = table.insertRow(-1);
for (var i = 0; i < cols.length; i++) {
// Create the table header th element
var theader = document.createElement("th");
theader.innerHTML = cols[i];
// Append columnName to the table row
tr.appendChild(theader);
}
// Adding the data to the table
for (var i = 0; i < list.length; i++) {
// Create a new row
trow = table.insertRow(-1);
for (var j = 0; j < cols.length; j++) {
var cell = trow.insertCell(-1);
// Inserting the cell at particular place
cell.innerHTML = list[i][cols[j]];
}
}
// Add the newly created table containing json data
var el = document.getElementById("table");
el.innerHTML = "";
el.appendChild(table);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA