WORKSHOP

{ JSON }

CONTENIDO

  • ¿Qué es JSON?
  • Tipos de Datos
  • Herramientas
  • Conversiones
  • Propiedades
  • Operaciones CRUD
     
  • Conversiones Avanzadas
  • Objetos literales
  • Uso de API real
  • Postman
  • Evaluacion

REQUISITOS

  • Crear variables
  • Asignar valores a variables
  • Diferenciar tipos de datos
  • Definir variables
  • Asignar valores
  • Usar 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

Sli.do #19767

Capítulo 1:

¿Qué es JSON?

WORKSHOP

{ JSON }

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.

Notación de Objetos de JavaScript 

ARCHIVO

archivo.json

"Hola"

123

null

true

false

archivo.json

JSON

Capítulo 2:

Tipos de Datos

WORKSHOP

{ JSON }

TIPOS

Booleans true    false
Arr​ay [  "Hola", "Mundo", 2019  ]
String "Hola Mundo"    "Hola"    ""
Object { "a": 1, "b": 2, "c": 3 }
Number 10   1.5    -30    1.2e10
Null null

TIP: BASONN rima con JSON

[ ] ARREGLOS

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

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

{ } OBJETOS

{
    "name": "Homer J Simpson",
    "age": 39,
    "home": {
        "address": "Avenida Siempreviva 742",
        "city": "Springfield"
    },
    "isEmployed": true,
    "sons": [ "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?

{
    "name": "Camilo",
    "last": "Martinez",
    "user": "equiman",
    "age": 40,
    "isDeveloper": true,
    "isStudent": false,
    "language": [
        "English", 
        "Español"
    ],
    "courses": [
        {
            "name": "React JS",
            "place": "Udemy"
        },
        {
            "name": "Petbot Workshop",
            "place": "React CBA"           
        },
        {
            "name": "Modern JS",
            "place": "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 current = new Date();
const result = current.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 current = new Date(result);

Convertir de texto a objeto Date.

Capítulo 3:

Herramientas

WORKSHOP

{ JSON }

PROYECTO

Descargar o clonar de GitHub:

Dudas en el canal #json-Workshop:

TALLER

node src/3.1

Abrir el proyecto en Visual Studio Code y la terminal interna.

Reemplaza Hello World por un ejemplo de cada tipo de datos primitivos, guardar y observar.

Tipos primitivos: string, number, boolean, null

Capítulo 4:

Conversiones

WORKSHOP

{ JSON }

¿CONVERTIR?

JS != JSON

archivo.js

archivo.json

{
  isValid: true,
  name: "Camilo",
  age: 40
}
{
  "isValid": true,
  "name": "Camilo",
  "age": 40
}
{
  isValid: false,
  age: edad(),
  current: (new Date()).toJSON()
}

archivo.js

archivo.json

{
  "isValid": false,
  "age": edad(),
  "current": (new Date()).toJSON()
}

Un JSON valido es un JS valido

Un JSON invalido no es JS

{
  "isValid": false,
  "age": 40,
  "current": "2020-03-29T05:51:25.998Z"
}

STRINGIFY

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko"
}
const result = JSON.stringify(dog);

JSON.stringify: convertir Objeto Lietral a texto JSON

console.log(result);
{"breed":"Akita Inu","name":"Hachiko"}

PARSE

const json = '{"breed":"Tuxedo","name":"Felix"}';
const cat = JSON.parse(json);

JSON.parse: convertir texto JSON a Objeto Literal

console.log(cat);
{breed: "Tuxedo", name: "Felix"}

PARSE

TALLER

node src/4.1

Convierte el objeto dog a result. ¿Qué muestra la consola?

node src/4.2

Convierte json a objeto cat. ¿Qué muestra la consola?

Vamos realizar ejercicios con las conversiones aprendidas.

¡Perfecto! ya sabemos hacer conversiones

Capítulo 4.1:

Stringify

WORKSHOP

{ JSON }

REPLACER

¿Podemos filtrar las propiedades?

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko"
}
const result = JSON.stringify(dog, ['breed']);
console.log(result);
{"bred":"Akita Inu"}

REPLACER

¿Podemos filtrar las propiedades?

const filter = (key, value) => {
  if (typeof value == 'string' && value !== 'Hachiko') {
    return undefined;
  }
  return value;
}

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko"
}
const result = JSON.stringify(dog, filter);
console.log(result);
{"name": "Hachiko"}
const filter = (key, value) => {
  if (typeof value === 'string' && value === 'Hachiko') {
    return value;
  }
  return undefined;
}

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko"
}
const result = JSON.stringify(dog, filter);
console.log(result);
undefined
console.log(result);
{"name": "Hachiko"}
const filter = (key, value) => {
  if (!key || typeof value === 'string' && value === 'Hachiko') {
    return value;
  }
  return undefined;
}

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko"
}
const result = JSON.stringify(dog, filter);

SPACE

¿Podemos formatear la conversión?

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko"
}
const result = JSON.stringify(dog, null, 6);
console.log(result);
{
      "breed":"Akita Inu",
      "name": "Hachiko"
}

toJSON

¿Podemos transformar el objeto?

const dog = { 
  breed: "Akita Inu",
  name: "Hachiko",
  toJSON: function() {
    return { 
      fullName: `${this.name} (${this.breed})`
    };
  }
}
const result = JSON.stringify(dog);
console.log(result);
{"fullName":"Hachiko (Akita Inu)"}

TALLER

node src/4.3

Convertir el objeto badBoy a result.

Antes de ejecutar los comandos discutamos cada ejercicio ¿Qué creen que va pasar?

node src/4.3

¿Eliminar .toJSON() y hacer que getAge() no retorne valor?

node src/4.3

¡Perfecto! Ya somos PRO en stringify

Filtrar por la propiedad current. Adiciona un formato de 2.

Capítulo 4.2:

Parse

WORKSHOP

{ JSON }

REVIVER

const parseDate = (key, value) => {
  if (typeof value !== 'string') {
    return value;
  }
 
  const isoDate = 
    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
  return isoDate.test(value) ? new Date(value) : value;
}
const json = '{"isValid":true,"current":"2020-04-01T03:15:32.130Z"}';

const reviver = JSON.parse(json, parseDate);

¿Se pueden transformar valores?

console.log(reviver);
{
  isValid: true, 
  current: Tue Mar 31 2020 22:15:32 GMT-0500 (Colombia Standard Time)
}

TALLER

Antes de ejecutar los comandos discutamos cada ejercicio ¿Qué creen que va pasar?

node src/4.4

Convertir usando un reviver de fecha con ISO-8601.

node src/4.4

Corregir age por 18 y current por "2020-04-01T03:15:32.130Z".

Convertir el string json a objeto badBoy.

¡Perfecto! Ya somos PRO en parse

y REPRO en conversiones

Capítulo 5:

Propiedades

WORKSHOP

{ JSON }

PROPIEDADES

const user = {
    name: "Camilo",
    age: 40,
    isDeveloper: true,
    language: ["English", "Español"],
}
console.log(user);

¿Cómo acceder a los valores de las propiedades? 

console.log(user.name);
console.log(user.age);
console.log(user.isDeveloper);
console.log(user.language);
console.log(user.language[0]);
console.log(user.language[1]);

TALLER

node src/5.1

Acceder a cada una de las propiedades del objeto.

¡Perfecto! Ya somos PRO en propiedades

node src/5.2

Acceder a cada  elementos del arreglo character.sons.

NOTACIÓN ALTERNATIVA

const user = {
    name: "Camilo",
    age: 40,
    isDeveloper: true,
    language: ["English", "Español"],
}
console.log(user.name);

También se pueden acceder así:

console.log(user['name']);
const property = 'name';
console.log(user[property]);

¿QUIÉN ESTÁ DETRÁS?

const list = [
  'A', 
  'B', 
  'C'
];
const list = {
  0: 'A', 
  1: 'B', 
  2: 'C'
};

{  }

[  ]

{  }

{  }

BAIA BAIA!

TALLER

node src/5.1

Acceder a cada una de las propiedades del objeto.

¡Perfecto! Ya eres RE-PRO en propiedades

node src/5.2

Acceder a cada  elementos del arreglo character.sons.

Repitamos el taller pero usando la forma alternativa.

Capítulo 5.1:

Objetos Literales

WORKSHOP

{ JSON }

VARIABLES

const user = {};

let handle = 'equiman';
user[handle] = {};
user[handle].type = 'Admin';
user[handle].message = {};
user[handle].message.time = 30;
user.equiman.message.type = 'sec';

handle = 'equimancho';
user[handle] = {type: 'User'};
const message = {'type': 'dec', 'time': 60};
user[handle].message = message;

user.equiman.message.time = 15;
user[handle].message.time = 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 page = {
  onLoad: function() {
    console.log('Page was loaded');
  },
  onFinish: function() {
    console.log('Page was finished');
  }
};

let event = 'onFinish'
page[event]();
const page = {
  onLoad() {
    console.log('Page was loaded');
  },
  onFinish() {
    console.log('Page was finished');
  }
};

let event = 'onFinish'
page[event]();
const page = {
  onLoad:
    () => console.log('Page was loaded'),
  onFinish:
    () => console.log('Page was finished')
};


let event = 'onFinish'
page[event]();

ES5

ES6

DESESTRUCTURACIÓN

const character = {
    name: "Homer J Simpson",
    age: 39,
    home: {
        address: "Avenida Siempreviva 742",
        city: "Springfield"
    },
    isEmployed: true,
    sons: ["Bart", "Lisa", "Maggie"]
}

const name = character.name;
const address = character.home.address;

console.log(name);
console.log(address);

ES6

const character = {
    name: "Homer J Simpson",
    age: 39,
    home: {
        address: "Avenida Siempreviva 742",
        city: "Springfield"
    },
    isEmployed: true,
    sons: ["Bart", "Lisa", "Maggie"]
}

const {name, home: {address}} = character;

console.log(name);
console.log(address);

TALLER

node src/5.3

Crear las variables age, city y sons y asignarles los valores del objeto.

node src/5.3

Crear las mismas variables pero usando desestructuración.

Capítulo 6:

Operaciones

WORKSHOP

{ JSON }

OPERACIONES

TIP: Usar un identificador como clave.

const users = [
    {
        handle: "bochap_",
        name: "Martín Pastore",
        country: "AR"
    },
    {
        handle: "selene_nr",
        name: "Lara Diaz",
        country: "AR"
    },
    {
        handle: "sanchez_ata",
        name: "Ata Sanchez",
        country: "AR"
    }
]
const users = {
    bochap_: {
        nombre: "Martín Pastore",
        country: "AR🇷"
    },
    selene_nr: {
        nombre: "Lara Diaz",
        country: "AR"
    },
    sanchez_ata: {
        nombre: "Ata Sanchez",
        country: "AR"
    },
}
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 description = {
  name: "Caro Bustos",
  country: "AR"
};

const handle = 'carobsts';
users[handle] = description;
console.log(users);
node src/6.1

Adicionar a Caro a la lista de usuarios.

TALLER

READ

const handle = 'sanchez_ata';
const result = users[handle];

console.log(result);
console.log('----------')
console.log(`Name:  ${result.name}`);
console.log(`Coutry: ${result.country}`);
node src/6.2

Buscar a Ata y ver en consola las propiedades.

TALLER

UPDATE

node src/6.3

Actualiza el país de Lara a Alemanía.

TALLER

const handle = 'selene_nr';
users[handle].country = 'DE';
console.table(users);

DELETE

node src/6.4

Eliminar a Bocha de la lista de usuarios.

TALLER

const handle = 'bochap_';
delete users[handle];
console.table(users);

¿EN LOTE?

node taller/6.5

Adicionar el nivel a TODOS los usuarios.

TALLER

for (const key in users) {
  users[key].level = 'Pro';
}

Capítulo 6.1:

Arreglos

WORKSHOP

{ JSON }

OPERACIONES

Create Crear / Insertar
Read Leer
Update Actualizar
Delete Eliminar

Las 4 operaciones básicas del almacenamiento de información son:

const users = [
    {
        "handle": "bochap_",
        "name": "Martín Pastore",
        "country": "AR"
    },
    {
        "handle": "selene_nr",
        "name": "Lara Diaz",
        "country": "AR"
    },
    {
        "handle": "sanchez_ata",
        "name": "Ata Sanchez",
        "country": "AR"
    }
]

Con JSON en arreglos.

CREATE

const description = {
  handle: "carobsts",
  name: "Caro Bustos",
  country: "AR"
};

users.push(description);
console.table(users);
node src/6.6

Adicionar a Caro a la lista de usuarios.

TALLER

READ

const handle = 'sanchez_ata';
const result = users.find(
  user => user.handle === handle
);

console.log(result);
console.log('----------')
console.log(`Name:  ${result.name}`);
console.log(`Coutry: ${result.country}`);
node src/6.7

Buscar a Ata y ver en consola las propiedades.

TALLER

UPDATE

node src/6.8

Actualiza el país de Lara a Alemanía.

TALLER

const handle = 'selene_nr';
const result = users.map(
  user => {
    if (user.handle === handle) {
      user.country = 'DE';
    }
    return user;
  }
);

console.table(result);

DELETE

node src/6.9

Eliminar a Bocha de la lista de usuarios.

TALLER

const handle = 'bochap_';

const index = users.findIndex(
  user => user.handle === handle
);

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

console.table(users);

¿EN LOTE?

node src/6.10

Adicionar el nivel a TODOS los usuarios.

TALLER

for (const [index, value] of users.entries()) {
  value.level = 'Pro';
  users[index] = value;
}
const users = require('../data/userArray.json');

const usersObject = {};
user.forEach(user => {
  const {
    handle,
    ...properties
  } = user;

  usersObject[handle] = properties;
});

console.table(usersObject);

RE-MODELADO

Capítulo 7:

Reto

WORKSHOP

{ JSON }

LA VIDA REAL

Vamos a usar un API de Pokemon

node src/7.1

RETO

  • Cuál es el nombre del Pokemon?
  • Cuáles son sus habilidades?
  • Cuál es su tipo?
  • Cuál es su peso?

Vamos a obtener los datos de un Pokemon de forma aleatoria. Tu misión si decides aceptarla es:

Capítulo 8:

Finalización

WORKSHOP

{ JSON }

SAQUEN UNA HOJITA

Sli.do #19767

¡GRACIAS!

twitter.com/equimancho

dev.to/equimancho

youtube.com/c/equimancho

linkedin.com/in/equiman

JSON Workshop (React CBA)

By Camilo Martinez

JSON Workshop (React CBA)

De Novato a Experto

  • 893