Camilo Martinez
'Ingeniero', 'Desarrollador de Software', 'Estudiante de Inglés'
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
Sli.do #19767
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
Booleans | true false |
Array | [ "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
[
"Text",
89,
true,
false,
null,
{}
]
Cada valor del arreglo debe ir separado por una coma. El último valor no debe llevar coma.
{
"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
{
"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
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.
Descargar o clonar de GitHub:
Dudas en el canal #json-Workshop:
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
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"
}
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"}
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"}
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
¿Podemos filtrar las propiedades?
const dog = {
breed: "Akita Inu",
name: "Hachiko"
}
const result = JSON.stringify(dog, ['breed']);
console.log(result);
{"bred":"Akita Inu"}
¿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);
¿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"
}
¿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)"}
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.
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)
}
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
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]);
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.
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]);
const list = [
'A',
'B',
'C'
];
const list = {
0: 'A',
1: 'B',
2: 'C'
};
BAIA BAIA!
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.
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;
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'
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
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);
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.
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.
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.
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.
node src/6.3
Actualiza el país de Lara a Alemanía.
const handle = 'selene_nr';
users[handle].country = 'DE';
console.table(users);
node src/6.4
Eliminar a Bocha de la lista de usuarios.
const handle = 'bochap_';
delete users[handle];
console.table(users);
node taller/6.5
Adicionar el nivel a TODOS los usuarios.
for (const key in users) {
users[key].level = 'Pro';
}
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.
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.
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.
node src/6.8
Actualiza el país de Lara a Alemanía.
const handle = 'selene_nr';
const result = users.map(
user => {
if (user.handle === handle) {
user.country = 'DE';
}
return user;
}
);
console.table(result);
node src/6.9
Eliminar a Bocha de la lista de usuarios.
const handle = 'bochap_';
const index = users.findIndex(
user => user.handle === handle
);
if (index > -1) {
users.splice(index, 1);
}
console.table(users);
node src/6.10
Adicionar el nivel a TODOS los usuarios.
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);
Vamos a usar un API de Pokemon
node src/7.1
Vamos a obtener los datos de un Pokemon de forma aleatoria. Tu misión si decides aceptarla es:
Sli.do #19767
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'