Camilo Martínez

@equimancho

DE NOVATO A EXPERTO

{ JSON }

CONTENIDO BÁSICO

¿Qué es JSON?
Tipos de Datos
Herramientas
Conversiones
- Parse
- Stringify

Objetos Líreales
- Propiedades
Operaciones
- Create
- Read
- Update
- Delete

@equimancho

4 talleres + 1 reto

CONTENIDO AVANZADO

Conversiones avanzadas
- Stringify (Replacer, Format, toJSON)
- Parse (Reviver)
- Fechas (ISO-8601, EPOCH)
Objetos Literales
- Variables a propiedades
- Switch
- Funciones
- Eval
- Desestructuración

CRUD
- Arreglos
- Re-modelado
Reto
- Explicación del API de GOT
- Postman
- Solución
Evaluación
Certificación

@equimancho

REQUISITOS

Crear variables
Asignar valores a variables
Tipos de datos (string, number, boolean)

Definir variables
Asignar valores
Arreglos
Objetos
Funciones con parámetros
console.log()

NOCIONES DE DESARROLLO:

JAVASCRIPT:

comándos básicos

CONSOLA:

@equimancho

ACUERDOS

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

Menti.com

@equimancho

Cuando uno enseña, dos aprenden

- Robert Half -

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 1:

¿Qué es JSON?

{ JSON }

@equimancho

JavaScript Object Notation

Notación de Objetos de JavaScript

I'm JASON

@equimancho

JavaScript Object Notation

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.

www.json.org

@equimancho

ARCHIVO

archivo.json

"Hola"

123

null

true

false

archivo.json

JSON

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 2:

Tipos de Datos

{ JSON }

@equimancho

TIPOS

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

@equimancho

[ ] ARREGLOS

[
    "Texto",
    89,
    true,
    false,
    null,
    {}
]

Cada valor del arreglo debe ir separado por una coma. El último valor no debe llevar coma.

@equimancho

{ } OBJETOS

{
    "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

@equimancho

¿TODOS?

{
    "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

B

A

S

O

N

B

A

S

O

N

B

A

S

O

N

B

A

S

O

N

B

A

S

O

N

B

A

S

O

N

@equimancho

¿FECHAS?

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.

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 3:

Herramientas

{ JSON }

@equimancho

FUNDAMENTAL

¡NO! ¡NO!
ESTE CURSO
NO ES DE
JASON

@equimancho

PROYECTO

https://github.com/equiman/playground-json

@equimancho

TALLER 1

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

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 4:

Conversiones

{ JSON }

@equimancho

¿CONVERTIR?

@equimancho

JS != JSON

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"
}

@equimancho

STRINGIFY

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"}

@equimancho

PARSE

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"}

PARSE

@equimancho

TALLER 2

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

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 4.1:

Stringify

{ JSON }

@equimancho

REPLACER

¿Podemos filtrar las propiedades?

const perro = { 
  raza: "Akita Japones",
  nombre: "Hachiko"
}
const texto = JSON.stringify(perro, ['raza']);

console.log(texto);
{"raza":"Akita Japones"}

@equimancho

REPLACER

¿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"}

@equimancho

SPACE

¿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"
}

@equimancho

toJSON

¿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)"}

@equimancho

TALLER 2

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.

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 4.2:

Parse

{ JSON }

@equimancho

REVIVER

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

@equimancho

TALLER 2

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

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 5:

Propiedades

{ JSON }

@equimancho

PROPIEDADES

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]);

@equimancho

TALLER 3

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.

@equimancho

NOTACION ALTERNATIVA

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]);

@equimancho

TALLER 3

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.

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 5.1:

Objetos Literales

{ JSON }

@equimancho

VARIABLES

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;

TIP: How to create properties from variables in JSON

@equimancho

¿SWITCH?

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));

TIP: Truthy and Falsy

if (esTrabajador){
  return 'Si'
} else {
  return 'No'
}

return esTrabajador ? 'Si' : 'No'

@equimancho

FUNCIONES

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

@equimancho

EVAL === EVIL

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 + '();');

@equimancho

DESESTRUCTURACION

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

TIP: Destructuring the complete guide

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);

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 6:

Operaciones: Objetos

{ JSON }

@equimancho

OPERACIONES

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.

@equimancho

CREATE

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.

TALLER 4

@equimancho

READ

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.

TALLER 4

@equimancho

UPDATE

node taller/4.3

Actualiza la casa de Jon Snow a Targaryens.

TALLER 4

const personaje = 'Jon Snow';
got[personaje].casa = 'Targaryens';
console.table(got);

@equimancho

DELETE

node taller/4.4

Eliminar a Daenerys de la lista de personajes.

TALLER 4

const personaje = 'Daenerys';
delete got[personaje];
console.table(got);

@equimancho

¿EN LOTE?

node taller/4.5

Adicionar temporada 8 a TODOS los personajes.

TALLER 4

for (const clave in got) {
  got[clave].season = 8;
}

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 6.1:

Operacione: Arreglos

{ JSON }

@equimancho

OPERACIONES

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.

@equimancho

CREATE

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.

TALLER 4

@equimancho

READ

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.

TALLER 4

@equimancho

UPDATE

node taller/4.3

Actualiza la casa de Jon Snow a Targaryens.

TALLER 4

const personaje = 'Jon Snow';
const resultado = got.map(
  actor => {
    if (actor.personaje === personaje) {
      actor.casa = 'Targaryens';
    }
    return actor;
  }
);

@equimancho

DELETE

node taller/4.4

Eliminar a Daenerys de la lista de personajes.

TALLER 4

const personaje = 'Daenerys';

const index = got.findIndex(
  actor => actor.personaje === personaje
);

if (index > -1) { 
  got.splice(index, 1);
}

@equimancho

¿EN LOTE?

node taller/4.5

Adicionar temporada 8 a TODOS los personajes.

TALLER 4

for (const [indice, valor] of got.entries()) {
  valor.season = 8;
  got[indice] = valor;
}

@equimancho

const got = require('../data/got.json');

const conversion = {};
got.forEach(actor => {
  const {
    personaje,
    ...propiedades
  } = actor;

  conversion[personaje] = propiedades;
});

console.log(conversion);

RE-MODELADO

TIP: Enhanced Object Literals

Code is dark... and full of errors!

@equimancho

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 7:

Reto

{ JSON }

@equimancho

LA VIDA REAL

Vamos a usar un API de Game of Thrones

@equimancho

HERRAMIENTAS

@equimancho

node taller/5.1

Acceder a las propiedades titles, name, gender, culture, house.

TALLER 5

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.

@equimancho

TALLER 5

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.

@equimancho

RETO

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.

@equimancho

Camilo Martínez

@equimancho

DE NOVATO A EXPERTO

Capítulo 8:

Finalización

{ JSON }

SAQUEN UNA HOJITA

Evaluación

Menti.com

@equimancho

EL DESQUITE

Encuesta del curso

@equimancho

¡GRACIAS!

@equiman

twitter.com/equimancho

dev.to/equimancho

youtube.com/c/equimancho

linkedin.com/in/equiman

@equimancho

DE NOVATO A EXPERTO

{ JSON }

CONTENIDO BÁSICO

CONTENIDO AVANZADO

REQUISITOS

NOCIONES DE DESARROLLO:

JAVASCRIPT:

CONSOLA:

ACUERDOS

Cuando uno enseña, dos aprenden

DE NOVATO A EXPERTO

Capítulo 1:

¿Qué es JSON?

{ JSON }

JavaScript Object Notation

Notación de Objetos de JavaScript

JavaScript Object Notation

ARCHIVO

JSON

DE NOVATO A EXPERTO

Capítulo 2:

Tipos de Datos

{ JSON }

TIPOS

[ ] ARREGLOS

{ } OBJETOS

¿TODOS?

¿FECHAS?

DE NOVATO A EXPERTO

Capítulo 3:

Herramientas

{ JSON }

FUNDAMENTAL

¡NO! ¡NO! ESTE CURSO NO ES DE JASON

PROYECTO

TALLER 1

DE NOVATO A EXPERTO

Capítulo 4:

Conversiones

{ JSON }

¿CONVERTIR?

JS != JSON

STRINGIFY

PARSE

PARSE

TALLER 2

DE NOVATO A EXPERTO

Capítulo 4.1:

Stringify

{ JSON }

REPLACER

REPLACER

SPACE

toJSON

TALLER 2

DE NOVATO A EXPERTO

Capítulo 4.2:

Parse

{ JSON }

REVIVER

TALLER 2

DE NOVATO A EXPERTO

Capítulo 5:

Propiedades

{ JSON }

PROPIEDADES

TALLER 3

NOTACION ALTERNATIVA

TALLER 3

DE NOVATO A EXPERTO

Capítulo 5.1:

Objetos Literales

{ JSON }

VARIABLES

¿SWITCH?

FUNCIONES

EVAL === EVIL

DESESTRUCTURACION

DE NOVATO A EXPERTO

Capítulo 6:

¡NO! ¡NO!
ESTE CURSO
NO ES DE
JASON