Páginas

▼
▼

sábado, 31 de agosto de 2019

JavaScript: objetos JSON

Ya hemos visto en una entrada anterior lo que son los objetos JSON (JavaScript Object Notation) y algunos ejemplos. Está disponible en la siguiente entrada.
En el siguiente caso práctico vamos a manejar el objeto JSON usando únicamente JavaScript, esto es, si usar jQuery y sin usar AJAX.

Versión 1

Disponemos de un objeto JSON definido como variable dentro del código JavaScript. La variable se denomina peliculas y contiene un array con siete películas. Dentro del array cada elemento es un objeto del tipo clave-valor donde se tiene un id de cada película con su nombre, director, año y calificación.

El objetivo es listar el nombre y año de cada una de las siete películas.



HTML

La última línea del body llama al procedimiento JS. Esto se hace en ese punto, para que dé tiempo a que se cargue el DOM.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Listar un JSON</title>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <div></div>  
   <script type="text/javascript" src="script.js"></script>  
  </body>  
 </html>


JavaScript


 var peliculas=[  
  {  
   "id": 1,  
   "nombre": "El sexto sentido",  
   "director": "M. Night Shyamalan",  
   "year": 1999,  
   "clasificacion": "Drama"  
  },  
  {  
   "id": 2,  
   "nombre": "Pulp Fiction",  
   "director": "Tarantino",  
   "year": 1994,  
   "clasificacion": "Acción"  
  },  
  {  
   "id": 3,  
   "nombre": "Todo Sobre Mi Madre",  
   "director": "Almódovar",  
   "year": 1999,  
   "clasificacion": "Drama"  
  },  
  {  
   "id": 4,  
   "nombre": "300",  
   "director": "Zack Snyder",  
   "year": 2007,  
   "clasificacion": "Acción"  
  },  
  {  
   "id": 5,  
   "nombre": "El silencio de los corderos",  
   "director": "Jonathan Demme",  
   "year": 1991,  
   "clasificacion": "Drama"  
  },  
  {  
   "id": 6,  
   "nombre": "Forrest Gump",  
   "director": "Robert Zemeckis",  
   "year": 1994,  
   "clasificacion": "Comedia"  
  },  
  {  
   "id": 7,  
   "nombre": "La vida es bella",  
   "director": "Roberto Benigni",  
   "year": 1997,  
   "clasificacion": "Comedia dramática"  
  }  
 ];  
 console.log(peliculas[0].nombre);  
 var mensaje="";  
 for(let i in peliculas){  
  mensaje+="<li>"+peliculas[i].nombre+" - "+peliculas[i].year+"</li>";  
 }  
 var midiv=document.querySelector('div');  
 midiv.innerHTML=mensaje;


Versión 2





HTML


  • En la versión 2 se llama al script en el head.
  • El div lleva un id.


 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Listar un JSON</title>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <div id="film"></div>  
  </body>  
 </html>


JavaScript

Hemos reducido un poco el objeto JSON eliminando el id y la clasificación.
Para conseguir que esté cargado el DOM cuando comienza el código hemos utilizado la siguiente estructura de JavaScript puro.

window.addEventListener('load',function(){
    // código que se ejecuta después de que se cargue el DOM
});

 'use strict'  
 var peliculas=[  
  {  
   "nombre": "El sexto sentido",  
   "director": "M. Night Shyamalan",  
   "year": 1999  
  },  
  {  
   "nombre": "Pulp Fiction",  
   "director": "Tarantino",  
   "year": 1994  
  },  
  {  
   "nombre": "Todo Sobre Mi Madre",  
   "director": "Almódovar",  
   "year": 1999  
  },  
  {  
   "nombre": "300",  
   "director": "Zack Snyder",  
   "year": 2007  
  },  
  {  
   "nombre": "El silencio de los corderos",  
   "director": "Jonathan Demme",  
   "year": 1991  
  },  
  {  
   "nombre": "Forrest Gump",  
   "director": "Robert Zemeckis",  
   "year": 1994  
  },  
  {  
   "nombre": "La vida es bella",  
   "director": "Roberto Benigni",  
   "year": 1997  
  }  
 ];  
 window.addEventListener('load',function(){  
  var midiv=document.querySelector('#film');  
  for(let i in peliculas){  
   var p=document.createElement('p');  
   p.append(peliculas[i].nombre+" - "+peliculas[i].year);  
   midiv.append(p);  
  }  
 });


Pendiente de estudiar

Realizar un tercer caso donde el objeto JSON se encuentre en un archivo propio con extensión json en nuestra carpeta local.


en

No hay comentarios:

Publicar un comentario