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 denominapeliculas 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 delbody 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 elid 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);
}
});
