En este tutorial aprenderemos a leer un objeto JSON usando JavaScript. Este código leerá los datos como objetos JSON. El código en sí usa una función onclick () para iniciar un método que lee el objeto JSON y lo muestra en la tabla HTML usando el bucle for (). Puede aplicar este script a su código, es un programa fácil de usar, no dude en modificarlo.
Usaremos JavaScript para agregar alguna característica nueva a la interfaz del sitio web al escribirla realmente en una página HTML. Es lo que le da a su página diferentes elementos interactivos y animaciones que atraen al usuario.
Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="<a href="https://compubinario.com">CompuBinario</a>
</a> </div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Leer Objeto JSON en Javascript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-3">
<center><button class="btn btn-primary" type="button" onclick="readJSON();">Leer JSON</button></center>
</div>
<div class="col-md-9">
<table class="table table-bordered">
<thead class="alert-info">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Direccion</th>
</tr>
</thead>
<tbody id= "result"></tbody>
</table>
</div>
</div>
</body>
<script src="js/script.js"></script>
</html>
Crear el script:
Este código contiene el script de la aplicación. Este código leerá el objeto JSON cuando se haga clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos como se muestra a continuación dentro del editor de texto y guárdelo como script.js dentro del directorio js
function readJSON(){
var data = [
{firstname: 'John', lastname: 'Smith', address: 'New York'},
{firstname: 'Claire', lastname: 'Temple', address: 'Racoon City'}
];
var table = "" ;
for(var i in data){
table += "<tr>";
table += "<td>"
+ data[i].firstname +"</td>"
+ "<td>" + data[i].lastname +"</td>"
+ "<td>" + data[i].address +"</td>" ;
table += "</tr>";
}
document.getElementById("result").innerHTML = table;
}
Ahí lo tienes, hemos aprendido a Leer un Objeto JSON en Javascript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
