Camilo Martinez
'Ingeniero', 'Desarrollador de Software', 'Estudiante de Inglés'
Camilo Martínez
4 talleres + 1 reto
comándos básicos
Voy a intentar resolver los ejercicios
Voy a permitir equivocarme, es parte de aprender
Voy a dar lo máximo, no me voy a rendir
- Robert Half -
Camilo Martínez
I'm JASON
Formato de representación e intercambio de datos
Ligero usados comúnmente para API, configuraciones o almacenamiento de datos
Fácil de leer/escribir para humanos, para las maquinas es fácil interpretarlo y generarlo.
Se integra fácilmente con la mayoría de lenguajes modernos.
archivo.json
"Hola"
123
null
true
false
archivo.json
Camilo Martínez
Booleans | Lógicos | true false |
Array | [ valor ] | [ "Hola", "Mundo", 2019 ] |
String | "Texto" | "Hola Mundo" "Hola" "" |
Object | { "clave": valor, "clave": valor } | { "Edad": 30 } { "a": 1, "b": 2, "c": 3 } |
Number | Numero | 10 1.5 -30 1.2e10 |
Null | Nulo | null |
TIP: BASONN rima con JSON
[
"Texto",
89,
true,
false,
null,
{}
]
Cada valor del arreglo debe ir separado por una coma. El último valor no debe llevar coma.
{
"nombre": "Homer J Simpson",
"edad": 39,
"direccion": {
"calle": "Avenida Siempreviva 742",
"ciudad": "Springfield"
},
"esEmpleado": true,
"hijos": [ "Bart", "Lisa", "Maggie" ]
}
La clave debe ir entre comillas dobles. Cada elemento del objeto debe ir separado por una coma. El último elemento no debe llevar coma.
Contiene uno o varios elementos. Cada elemento se compone de la combinación "clave": valor
{
"nombre": "Camilo",
"apellido": "Martinez",
"usuario": "equiman",
"edad": 39,
"esDesarrollador": true,
"esEstudiante": false,
"idiomas": [
"English",
"Español"
],
"cursos": [
{
"nombre": "Certificacion Desarrollo Web",
"institucion": "Poli JIC"
},
{
"nombre": "TypeScript",
"institucion": "Udemy"
},
{
"nombre": "ECMAScript 6",
"institucion": "Wes Bos"
}
]
}
B
A
S
O
N
N
B
A
S
O
N
N
B
A
S
O
N
N
B
A
S
O
N
N
B
A
S
O
N
N
B
A
S
O
N
N
B
A
S
O
N
N
const fecha = new Date();
const texto = fecha.toJSON();
Las fechas JSON tienen el mismo formato del estándar ISO-8601: YYYY-MM-DDTHH:mm:ss.sssZ
Convertir de objeto Date a texto con toJSON.
const fecha = Date.parse(texto);
Convertir de texto a objeto Date.
Camilo Martínez
node taller/1
Abrir el proyecto en Visual Studio Code y la terminal interna.
Reemplaza Hola Mundo por un ejemplo de cada tipo de datos primitivos, guardar y observar.
Tipos primitivos: string, number, boolean, null
Camilo Martínez
archivo.js
archivo.json
{
esValido: true,
nombre: "Camilo",
edad: 40
}
{
"esValido": true,
"nombre": "Camilo",
"edad": 40
}
{
esValido: false,
calcular: edad(),
fecha: (new Date()).toJSON()
}
archivo.js
archivo.json
{
"esValido": false,
"calcular": edad(),
"fecha": (new Date()).toJSON()
}
Un JSON valido es un JS valido
Un JSON invalido no es JS
{
"esValido": false,
"calcular": 40,
"fecha": "2020-03-29T05:51:25.998Z"
}
const perro = {
raza: "Akita Japones",
nombre: "Hachiko"
}
const texto = JSON.stringify(perro);
JSON.stringify: convertir Objeto JS a texto JSON
console.log(texto);
{"raza":"Akita Japones","nombre":"Hachiko"}
const texto = '{"raza":"Británico","nombre":"Felix"}';
const gato = JSON.parse(texto);
JSON.parse: convertir texto JSON a Objeto JS
console.log(gato);
{raza: "Británico", nombre: "Felix"}
node taller/2.1
Convierte el objeto perro a texto. ¿Qué muestra la consola?
node taller/2.2
Convierte texto a objeto gato. ¿Qué muestra la consola?
Vamos realizar ejercicios con las conversiones aprendidas.
¡Perfecto! ya sabemos hacer conversiones
Camilo Martínez
¿Podemos filtrar las propiedades?
const perro = {
raza: "Akita Japones",
nombre: "Hachiko"
}
const texto = JSON.stringify(perro, ['raza']);
console.log(texto);
{"raza":"Akita Japones"}
¿Podemos filtrar las propiedades?
const filtro = (clave, valor) => {
if (!clave || typeof valor === 'string' && valor === 'Hachiko') {
return valor;
}
return undefined;
}
const perro = {
raza: "Akita Japones",
nombre: "Hachiko"
}
const texto = JSON.stringify(perro, filtro);
console.log(texto);
{"nombre": "Hachiko"}
¿Podemos formatear la conversión?
const perro = {
raza: "Akita Japones",
nombre: "Hachiko"
}
const texto = JSON.stringify(perro, null, 6);
console.log(texto);
{
"raza":"Akita Japones",
"nombre": "Hachiko"
}
¿Podemos transformar el objeto?
const perro = {
raza: "Akita Japones",
nombre: "Hachiko",
toJSON: function() {
return {
especial: `${this.nombre} (${this.raza})`
};
}
}
const texto = JSON.stringify(perro);
console.log(texto);
{"especial":"Hachiko (Akita Japones)"}
node taller/2.3
Convertir el objeto maltrecho a texto.
Antes de ejecutar los comandos discutamos cada ejercicio ¿Qué creen que va pasar?
node taller/2.3
¿Y si eliminamos .toJSON() y edad no retorna valor?
node taller/2.3
¡Perfecto! Ya somos PRO en stringify
Filtrar por los elementos calcular y fecha. Formato de 2.
Camilo Martínez
const conversor = (clave, valor) => {
if (typeof valor !== 'string') {
return valor;
}
const isoDate =
/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
return isoDate.test(valor) ? new Date(valor) : valor;
}
const texto = '{"esValido":true,"fecha":"2020-04-01T03:15:32.130Z"}';
const revivir = JSON.parse(texto, conversor);
¿Se pueden transformar valores?
console.log(revivir);
{
esValido: true,
fecha: Tue Mar 31 2020 22:15:32 GMT-0500 (Colombia Standard Time)
}
const conversor = (clave, valor) => {
if (typeof valor !== 'string') {
return valor;
}
const isoDate =
/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
return isoDate.test(valor) ? Date.parse(valor) : valor;
}
const texto = '{"esValido":true,"fecha":"2020-04-01T03:15:32.130Z"}';
const revivir = JSON.parse(texto, conversor);
console.log(revivir);
{
esValido: true,
fecha: 1585710932130
}
ISO-8601
EPOCH
Antes de ejecutar los comandos discutamos cada ejercicio ¿Qué creen que va pasar?
node taller/2.4
Convertir usando un reviver de fecha con ISO-8601.
node taller/2.4
Corregir edad por 18 y fecha por "2020-04-01T03:15:32.130Z".
Convertir texto a objeto maltrecho.
¡Perfecto! Ya somos PRO en parse
y REPRO en conversiones
Camilo Martínez
const persona = {
nombre: "Camilo",
edad: 40,
esDesarrollador: true,
idiomas: ["English", "Español"],
}
console.log(persona);
¿Cómo acceder a los valores de las propiedades?
console.log(persona.nombre);
console.log(persona.edad);
console.log(persona.esDesarrollador);
console.log(persona.idiomas);
console.log(persona.idiomas[0]);
console.log(persona.idiomas[1]);
node taller/3.1
Acceder a cada una de las propiedades del objeto.
¡Perfecto! Ya somos PRO en propiedades
node taller/3.2
Acceder a cada elementos del arreglo persona.hijos.
const persona = {
nombre: "Camilo",
edad: 39,
esDesarrollador: true,
idiomas: ["English", "Español"],
}
console.log(persona.nombre);
También se pueden acceder así:
console.log(persona['nombre']);
const propiedad = 'nombre';
console.log(persona[propiedad]);
node taller/3.1
Acceder a cada una de las propiedades del objeto.
¡Perfecto! Ya eres RE-PRO en propiedades
node taller/3.2
Acceder a cada elementos del arreglo persona.hijos.
Repitamos el taller pero usando la forma alternativa.
Camilo Martínez
const usuarios = {};
let usuario = 'equiman';
usuarios[usuario] = {};
usuarios[usuario].tipo = 'Administrador';
usuarios[usuario].alerta = {};
usuarios[usuario].alerta.tiempo = 30;
usuarios.equiman.alerta.tipo = 'seg';
usuario = 'equimancho';
usuarios[usuario] = {tipo: 'Usuario'};
const alerta = {'tipo': 'seg', 'tiempo': 60};
usuarios[usuario].alerta = alerta;
usuario.equiman.alerta.time = 15;
usuario[user].alerta.tiempo = 80;
const numeros = {
1: 'Uno',
2: 'Dos',
3: 'Tres',
}
const buscar = (valor) => {
return numeros[valor] || 'Cero';
};
console.log(buscar(1));
const buscar = (valor) => {
let resultado = '';
switch (valor) {
case 1:
resultado = 'Uno';
break;
case 2:
resultado = 'Dos';
break;
case 3:
resultado = 'Tres';
break;
default:
resultado = 'Cero';
break;
}
return resultado;
};
console.log(buscar(1));
if (esTrabajador){
return 'Si'
} else {
return 'No'
}
return esTrabajador ? 'Si' : 'No'
const pagina = {
alIniciar: function() {
console.log('Se ha Iniciado el ciclo de vida');
},
alFinalizar: function() {
console.log('Se ha Finalizado el ciclo de vida');
}
};
let evento = 'alIniciar'
pagina[evento]();
const pagina = {
alIniciar() {
console.log('Se ha Iniciado el ciclo de vida');
},
alFinalizar() {
console.log('Se ha Finalizado el ciclo de vida');
}
};
let evento = 'alIniciar'
pagina[evento]();
const pagina = {
alIniciar:
() => console.log('Se ha Iniciado el ciclo de vida'),
alFinalizar:
() => console.log('Se ha Finalizado el ciclo de vida')
};
let evento = 'alFinalizar'
pagina[evento]();
ES5
ES6
function imprimir() {
console.log('Estoy imprimiendo');
}
eval('imprimir();');
NUNCA uses eval
function imprimir() {
console.log('Estoy imprimiendo');
}
const metodo = 'imprimir';
window[metodo]();
function imprimir() {
console.log('Estoy imprimiendo');
}
const metodo = 'imprimir';
eval(metodo + '();');
const simpsons = {
"nombre": "Homer J Simpson",
"edad": 39,
"direccion": {
"calle": "Avenida Siempreviva 742",
"ciudad": "Springfield"
},
"esEmpleado": true,
"hijos": [ "Bart", "Lisa", "Maggie" ]
}
const nombre = simpsons.nombre;
const calle = simpsons.direccion.calle;
console.log(nombre);
console.log(calle);
ES6
const simpsons = {
"nombre": "Homer J Simpson",
"edad": 39,
"direccion": {
"calle": "Avenida Siempreviva 742",
"ciudad": "Springfield"
},
"esEmpleado": true,
"hijos": [ "Bart", "Lisa", "Maggie" ]
}
const {nombre, direccion: {calle}} = simpsons;
console.log(nombre);
console.log(calle);
Camilo Martínez
TIP: Usar un identificador como clave.
const got = [
{
"personaje": "Jon Snow",
"actor": "Kit Harington",
"genero": "Male",
"casa": "Starks"
},
{
"personaje": "Daenerys",
"actor": "Emilia Clarke",
"genero": "Female",
"casa": "Targaryens"
},
{
"personaje": "Tyrion",
"actor": "Peter Dinklage",
"genero": "Male",
"casa": "Lanisters"
}
]
const got = {
"Jon Snow": {
"actor": "Kit Harington",
"genero": "Male",
"casa": "Starks"
},
"Daenerys": {
"actor": "Emilia Clarke",
"genero": "Female",
"casa": "Targaryens"
},
"Tyrion": {
"actor": "Peter Dinklage",
"genero": "Male",
"casa": "Lanisters"
}
}
Create | Crear / Insertar |
Read | Leer |
Update | Actualizar |
Delete | Eliminar |
Las 4 operaciones básicas del almacenamiento de información son:
Con JSON también las podemos realizar.
const descripcion = {
actor: 'Bella Ramsey',
genero: 'Female',
casa: 'Mormonts'
};
const personaje = 'Lyanna';
got[personaje] = descripcion;
console.log(got);
node taller/4.1
Adicionar a Lyanna a la lista de personajes.
const personaje = 'Tyrion';
const resultado = got[personaje];
console.log(resultado);
console.log('----------')
console.log(`Actor: ${resultado.actor}`);
console.log(`Genero: ${resultado.genero}`);
console.log(`Casa: ${resultado.casa}`);
node taller/4.2
Buscar a Tyrion y ver en consola las propiedades.
node taller/4.3
Actualiza la casa de Jon Snow a Targaryens.
const personaje = 'Jon Snow';
got[personaje].casa = 'Targaryens';
console.table(got);
node taller/4.4
Eliminar a Daenerys de la lista de personajes.
const personaje = 'Daenerys';
delete got[personaje];
console.table(got);
node taller/4.5
Adicionar temporada 8 a TODOS los personajes.
for (const clave in got) {
got[clave].season = 8;
}
Camilo Martínez
Create | Crear / Insertar |
Read | Leer |
Update | Actualizar |
Delete | Eliminar |
Las 4 operaciones básicas del almacenamiento de información son:
const got = [
{
"personaje": "Jon Snow",
"actor": "Kit Harington",
"genero": "Male",
"casa": "Starks"
},
{
"personaje": "Daenerys",
"actor": "Emilia Clarke",
"genero": "Female",
"casa": "Targaryens"
},
{
"personaje": "Tyrion",
"actor": "Peter Dinklage",
"genero": "Male",
"casa": "Lanisters"
}
]
Con JSON en arreglos.
const descripcion = {
personaje: 'Lyanna',
actor: 'Bella Ramsey',
genero: 'Female',
casa: 'Mormonts'
};
got.push(descripcion);
console.log(got);
node taller/4.1
Adicionar a Lyanna a la lista de personajes.
const personaje = 'Tyrion';
const resultado = got.find(
actor => actor.personaje === personaje
);
console.log(resultado);
console.log('----------')
console.log(`Actor: ${resultado.actor}`);
console.log(`Genero: ${resultado.genero}`);
console.log(`Casa: ${resultado.casa}`);
node taller/4.2
Buscar a Tyrion y ver en consola las propiedades.
node taller/4.3
Actualiza la casa de Jon Snow a Targaryens.
const personaje = 'Jon Snow';
const resultado = got.map(
actor => {
if (actor.personaje === personaje) {
actor.casa = 'Targaryens';
}
return actor;
}
);
node taller/4.4
Eliminar a Daenerys de la lista de personajes.
const personaje = 'Daenerys';
const index = got.findIndex(
actor => actor.personaje === personaje
);
if (index > -1) {
got.splice(index, 1);
}
node taller/4.5
Adicionar temporada 8 a TODOS los personajes.
for (const [indice, valor] of got.entries()) {
valor.season = 8;
got[indice] = valor;
}
const got = require('../data/got.json');
const conversion = {};
got.forEach(actor => {
const {
personaje,
...propiedades
} = actor;
conversion[personaje] = propiedades;
});
console.log(conversion);
Code is dark... and full of errors!
Camilo Martínez
Vamos a usar un API de Game of Thrones
node taller/5.1
Acceder a las propiedades titles, name, gender, culture, house.
node taller/5.1
Hacer un reviver de la fecha de creación del personaje convirtiéndola a ISO-8601.
Obtener los datos de Jon Snow en los libros.
node taller/5.1
Hacer un reviver de los libros retornando un numero.
Obtener todos los Castillos en la serie. Filtrar el resultado con los que tengan nombre de fundador.
node taller/5.2
Acceder a las propiedades: name, location, founder
node taller/5.2
Crear un toJSON que concatene la religión y la cantidad de gobernantes entre paréntesis.
Construir desde cero el taller/5.3 consumiendo el API de GOT para obtener todos las Batallas en la serie. Filtrar el resultado con los que tengan solo un participante por facción.
node taller/5.3
Acceder a las propiedades: place, factions, casualties
node taller/5.3
Guardar los resultados en el archivo data/got.json.
Camilo Martínez
twitter.com/equimancho
dev.to/equimancho
youtube.com/c/equimancho
linkedin.com/in/equiman
By Camilo Martinez
De Novato a Experto
'Ingeniero', 'Desarrollador de Software', 'Estudiante de Inglés'