Camilo Martínez

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

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

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:

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

Cuando uno enseña, dos aprenden

 

- Robert Half -
Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 1:

¿Qué es JSON?

{ JSON }

JavaScript Object Notation

Notación de Objetos de JavaScript 

I'm JASON

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.

ARCHIVO

archivo.json

"Hola"

123

null

true

false

archivo.json

JSON

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 2:

Tipos de Datos

{ JSON }

TIPOS

Booleans Lógicos true    false
Arr​ay [ 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

[ ] ARREGLOS

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

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

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

¿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

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

¿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.

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 3:

Herramientas

{ JSON }

FUNDAMENTAL

¡NO! ¡NO!
ESTE CURSO
NO ES DE
J
ASON

PROYECTO

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

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 4:

Conversiones

{ JSON }

¿CONVERTIR?

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

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

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

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

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 4.1:

Stringify

{ JSON }

REPLACER

¿Podemos filtrar las propiedades?

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

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

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

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

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.

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 4.2:

Parse

{ JSON }

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

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

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 5:

Propiedades

{ JSON }

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

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.

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

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.

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 5.1:

Objetos Literales

{ JSON }

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;

¿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));
if (esTrabajador){
  return 'Si'
} else {
  return 'No'
}
return esTrabajador ? 'Si' : 'No'

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

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

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

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

DE NOVATO A EXPERTO

Capítulo 6:

Operaciones: Objetos

{ JSON }

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.

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

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

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

DELETE

node taller/4.4

Eliminar a Daenerys de la lista de personajes.

TALLER 4

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

¿EN LOTE?

node taller/4.5

Adicionar temporada 8 a TODOS los personajes.

TALLER 4

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

DE NOVATO A EXPERTO

Capítulo 6.1:

Operacione: Arreglos

{ JSON }

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.

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

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

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

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

¿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;
}
const got = require('../data/got.json');

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

  conversion[personaje] = propiedades;
});

console.log(conversion);

RE-MODELADO

Code is dark... and full of errors!

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 7:

Reto

{ JSON }

LA VIDA REAL

Vamos a usar un API de Game of Thrones

HERRAMIENTAS

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.

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.

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.

Camilo Martínez

DE NOVATO A EXPERTO

Capítulo 8:

Finalización

{ JSON }

SAQUEN UNA HOJITA

EL DESQUITE

¡GRACIAS!

twitter.com/equimancho

dev.to/equimancho

youtube.com/c/equimancho

linkedin.com/in/equiman

JSON

By Camilo Martinez

JSON

De Novato a Experto

  • 3,525