La tarea es obtener datos del archivo JSON dado y convertirlos en una tabla HTML.
Enfoque: tenemos un archivo JSON que contiene datos en forma de una array de objetos. En nuestro código, estamos usando jQuery para completar nuestra tarea. El código jQuery usa el método getJSON() para obtener los datos de la ubicación del archivo mediante una solicitud AJAX HTTP GET . Se necesitan dos argumentos. Uno es la ubicación del archivo JSON y el otro es la función que contiene los datos JSON. La función each() se usa para iterar a través de todos los objetos en la array. También se necesitan dos argumentos. Uno son los datos y el otro es la función que contiene el índice y el elemento. Se utiliza una string vacía para construir filas que contienen los datos de los objetos JSON. El método append() se usa para agregar la string que contiene filas en la tabla.
Archivo JSON:
Ejemplo:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GFG User Details</title>
<!-- INCLUDING JQUERY-->
<script src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- CSS FOR STYLING THE PAGE -->
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans',
'Gill Sans MT', ' Calibri',
'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
</style>
</head>
<body>
<section>
<h1>GeeksForGeeks</h1>
<!-- TABLE CONSTRUCTION-->
<table id='table'>
<!-- HEADING FORMATION -->
<tr>
<th>GFG UserHandle</th>
<th>Practice Problems</th>
<th>Coding Score</th>
<th>GFG Articles</th>
</tr>
<script>
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.getJSON("gfgdetails.json",
function (data) {
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<tr>';
student += '<td>' +
value.GFGUserName + '</td>';
student += '<td>' +
value.NoOfProblems + '</td>';
student += '<td>' +
value.TotalScore + '</td>';
student += '<td>' +
value.Articles + '</td>';
student += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
});
});
</script>
</section>
</body>
</html>
Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .