tablas de datos
En este artículo, leeremos la información de cada empleado de un objeto de datos anidado utilizando el complemento DataTables .
Enfoque: la opción column.data del complemento DataTables se usa para extraer datos de los datos JSON anidados hasta cualquier nivel. El punto (.) se usa para acceder a otro nivel de objeto de la opción column.data .
Los archivos precompilados que se necesitan para implementar son
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https://code.jquery.com/jquery-3.5.1.js https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Ejemplo: el siguiente código muestra los datos de todos los empleados en una tabla HTML utilizando el complemento DataTables .
Estructura de los datos de los empleados: el detalle del empleado está en forma de datos de objetos anidados.
estructura de detalles de un empleado
Código HTML: la parte de JavaScript del siguiente código extrae datos del archivo » nestedJSONData.txt «. En el siguiente ejemplo, details.designation ayuda a obtener la designación para el objeto de detalles para cada empleado y details.salary obtiene el salario para el objeto de detalles . Del mismo modo, dirección.0 y dirección.1 obtienen la ubicación y la ciudad de ese empleado en particular.
HTML
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1, maximum-scale=1,
user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!-- Datatable plugin CSS file -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!-- jQuery library file -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- Datatable plugin JS library file -->
<script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2>
How to read information from nested
objects in DataTables
</h2>
<!--HTML table with employee data-->
<table id="tableID" class="display"
style="width:100%">
<thead>
<!--Column headers for employee data-->
<tr>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
<th>Location</th>
<th>City</th>
</tr>
</thead>
</table>
<script>
/* Initialization of datatable */
$(document).ready(function () {
/* table ID is taken for datatable access */
$('#tableID').DataTable({
"processing": true,
"info": false,
/* Set pagination feature */
"paging": true,
"ajax": 'nestedJSONData.txt',
"columns": [
{ "data": "name" },
// designation key of details to
// show designation
{ "data": "details.designation" },
// salary key of details to show salary
{ "data": "details.salary" },
// 0th index of address to show location
{ "data": "address.0" },
// 1st index of address to show City
{ "data": "address.1" }
]
});
});
</script>
</body>
</html>
Archivo nestedJSONData.txt: el siguiente es el contenido de este archivo que tiene datos de objetos anidados para todos los empleados. Este archivo se utiliza en el código HTML anterior.
{
"data": [
{
"name": "Tina Mukherjee",
"details": {
"designation": "BPO member",
"salary": "300000"
},
"address": [
"24,chandni chowk",
"Pune"
]
},
{
"name": "Gaurav",
"details": {
"designation": "Teacher",
"salary": "100750"
},
"address": [
"esquare,JM road",
"Pune"
]
},
{
"name": "Ashtwini",
"details": {
"designation": "Junior engineer",
"salary": "860000"
},
"address": [
"Santa cruz",
"mumbai"
]
},
{
"name": "Celina",
"details": {
"designation": "Javascript Developer",
"salary": "430060"
},
"address": [
"crr lake side ville",
"tellapur"
]
},
{
"name": "Aisha",
"details": {
"designation": "Nurse",
"salary": "160000"
},
"address": [
"rk puram",
"Delhi"
]
},
{
"name": "Brad henry",
"details": {
"designation": "Accountant",
"salary": "370000"
},
"address": [
"chaurasi lane",
"Kolkatta"
]
},
{
"name": "Harry",
"details": {
"designation": "Salesman",
"salary": "130500"
},
"address": [
"32, krishna nagar",
"Navi mumbai"
]
},
{
"name": "Rhovina",
"details": {
"designation": "Amazon supporter",
"salary": "300900"
},
"address": [
"Aparna zone",
"hyderabad"
]
},
{
"name": "Celina",
"details": {
"designation": "Senior Developer",
"salary": "200000"
},
"address": [
"23, chandni chowk",
"pune"
]
},
{
"name": "Glenny",
"details": {
"designation": "Administrator",
"salary": "200500"
},
"address": [
"Nagpur",
"Maharashtra"
]
},
{
"name": "Brad Pitt",
"details": {
"designation": "Engineer",
"salary": "100000"
},
"address": [
"sainikpuri",
"Delhi"
]
},
{
"name": "Deepa",
"details": {
"designation": "Team Leader",
"salary": "200500"
},
"address": [
"Annanagar",
"Chennai"
]
},
{
"name": "Angelina",
"details": {
"designation": "CEO",
"salary": "1000000"
},
"address": [
"JM road",
"Aundh pune"
]
}
]
}
Producción:
Antes de la ejecución:
Después de la ejecución:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA