---
# System prepended metadata

title: JSON with Jeka

---

# JSON with Jeka

```javascript
let datos1 = [
	{
		"id": "0001",
		"type": "donut",
		"name": "Cake",
		"ppu": 0.55,
		"batters":
			{
				"batter":
					[
						{ "id": "1001", "type": "Regular" },
						{ "id": "1002", "type": "Chocolate" },
						{ "id": "1003", "type": "Blueberry" },
						{ "id": "1004", "type": "Devil's Food" }
					]
			},
		"topping":
			[
				{ "id": "5001", "type": "None" },
				{ "id": "5002", "type": "Glazed" },
				{ "id": "5005", "type": "Sugar" },
				{ "id": "5007", "type": "Powdered Sugar" },
				{ "id": "5006", "type": "Chocolate with Sprinkles" },
				{ "id": "5003", "type": "Chocolate" },
				{ "id": "5004", "type": "Maple" }
			]
	},
	{
		"id": "0002",
		"type": "donut",
		"name": "Raised",
		"ppu": 0.55,
		"batters":
			{
				"batter":
					[
						{ "id": "1001", "type": "Regular" }
					]
			},
		"topping":
			[
				{ "id": "5001", "type": "None" },
				{ "id": "5002", "type": "Glazed" },
				{ "id": "5005", "type": "Sugar" },
				{ "id": "5003", "type": "Chocolate" },
				{ "id": "5004", "type": "Maple" }
			]
	},
	{
		"id": "0003",
		"type": "donut",
		"name": "Old Fashioned",
		"ppu": 0.55,
		"batters":
			{
				"batter":
					[
						{ "id": "1001", "type": "Regular" },
						{ "id": "1002", "type": "Chocolate" }
					]
			},
		"topping":
			[
				{ "id": "5001", "type": "None" },
				{ "id": "5002", "type": "Glazed" },
				{ "id": "5003", "type": "Chocolate" },
				{ "id": "5004", "type": "Maple" }
			]
	}
]
```

Así que cómo dije antes puedes ver el primer character del variable `datos`, que en este caso es un `[`, asíque es un array.

Y como expliqué sacar elementos de un array se hace con `[número]`. Por ejemplo `datos1[0]` sacará el primer elemento.

Cual es exactamente el primer elemento?


```javascript
let datos2 = {"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
    {
        "batter":
            [
                { "id": "1001", "type": "Regular" },
                { "id": "1002", "type": "Chocolate" },
                { "id": "1003", "type": "Blueberry" },
                { "id": "1004", "type": "Devil's Food" }
            ]
    },
"topping":
    [
        { "id": "5001", "type": "None" },
        { "id": "5002", "type": "Glazed" },
        { "id": "5005", "type": "Sugar" },
        { "id": "5007", "type": "Powdered Sugar" },
        { "id": "5006", "type": "Chocolate with Sprinkles" },
        { "id": "5003", "type": "Chocolate" },
        { "id": "5004", "type": "Maple" }
    ]
}
``` 

Casi, es importante empezar con el primer character después del `[`. Entonces editalo. PErfecto!

Y eso que es?

J: *un objeto*

Exacto.

Y para sacar un elemento de un objeto se usa el nombre del elemento. Si el nombre es algo simple, como `id` o `name` se suele usar simplemente el nombre del variable seguido por `.` y el nombre del elemento, por ejemplo 

```javascript
datos2.name
```

Pero eso se puede encadenar!

Entonces para sacar el nombre del primer elemento de los datos originales se escribe:

```javascript
datos1[0].name
```


Ahora si queremos los toppings podemos escribir:

```javascript
datos1[0].toppings
```

y eso nos dará un arreglo:

```javascript
[
    { "id": "5001", "type": "None" },
    { "id": "5002", "type": "Glazed" },
    { "id": "5005", "type": "Sugar" },
    { "id": "5007", "type": "Powdered Sugar" },
    { "id": "5006", "type": "Chocolate with Sprinkles" },
    { "id": "5003", "type": "Chocolate" },
    { "id": "5004", "type": "Maple" }
]
```

J: *Ahora veo el problema, no tengo tanto problema con la navegacion, si no mas con como es mi "json"*

Si, tu JSON tiene un problema

Y si queremos el tipo del terecer elemento hacemos:

```javascript
datos1[0].toppings[2].type
```

Pero una cosa importante!!

```javascript
datos1[0].toppings[2].type == "Sugar"
```

Pero si hago:

```javascript
let toppings = datos1[0].toppings;
toppings[2].type == "Sugar"
```

Es *exactamente* lo mismo!

J: *guardas parte de la ruta en una variable*

Sip. Lo que importa es la "ruta" total, los variables son solamente una manera de apuntarlo en una manera mas legible para nosotros los pobres humanos


J: *ya, este problema no lo tengo... siempre creo muchas para que no falten ;)*


Jeje, mientras entiendes que es lo mismo.
Que por ejemplo hacer `datos1[0].toppings[2].type = "Queso"` cambiará tambien el contenido de `toppings[2].type` porque son realmente los mismos datos.

J: *ya,  esta parte mas o menos lo llevo bien*


Ok, copiamos tus datos para ver que pasa con ellos:

```javascript
let almacen = [
    {
        departamento: "Joyeria",
        productos: [
            { nombre: "Anillos", precio: 3, stock: 4 },
            { nombre: "Collares", precio: 3, stock: 4 },
            { nombre: "Pulseras", precio: 3, stock: 4 },
        ],
        departamento: "drogeria",
        productos: [
            { nombre: "Perfume", precio: 12, stock: 3 },
            { nombre: "Champoo", precio: 12, stock: 3 },
            { nombre: "Jabone", precio: 12, stock: 3 },
        ],
        departamento: "farmacia",
        productos: [
            { nombre: "Ibuprofeno", precio: 15, stock: 92 },
            { nombre: "Paracetamol", precio: 15, stock: 92 },
            { nombre: "Frenadol", precio: 15, stock: 92 }
        ]
    }
];
```

J: *voy a probar ahora
dame unos minutos para poder arreglarlo*

 
Ok, adelante!

J: *creo que deberia ser asi mas o 
menos*


```javascript
datos3 = departamentos: {
  Joyeria: [
      { 
          nombre: "Anillos", 
          precio: 3, 
          stock: 4  
      },
      { 
          nombre: "Anillos", 
          precio: 3, 
          stock: 4 
      },
  ],
  farmacia: [
      {
          nombre: "Anillos", 
          precio: 3, 
          stock: 4}
      ]
}
```

Ok, pero pon en palabras lo que es eso.
**"Datos3 es un ....."**

(pista: tu JSON original es casi casi correcto, sólo faltan 2 `}`, nada mas!)

```javascript 

let almacen = [
  {
    id: "0001",
    departamiento: "Joyeria",
    productos: [
      {
        nombre: "Anillos",
        precio: 3,
        stock: 4,
      },
      {
        nombre: "Collares",
        precio: 3,
        stock: 4,
      },
      {
        nombre: "Pulseras",
        precio: 3,
        stock: 4,
      },
    ],
  },
  {
    id: "0002",
    departamiento: "Carniceria",
    productos: [
      {
        nombre: "Chuletas",
        precio: 3,
        stock: 4,
      },
      {
        nombre: "Salchichas",
        precio: 3,
        stock: 4,
      },
      {
        nombre: "Jamon",
        precio: 3,
        stock: 4,
      },
    ],
  },
  {
    id: "0003",
    departamiento: "Pescaderia",
    productos: [
      {
        nombre: "Bacalao",
        precio: 3,
        stock: 4,
      },
      {
        nombre: "Gambas",
        precio: 3,
        stock: 4,
      },
      {
        nombre: "Salmon",
        precio: 3,
        stock: 4,
      },
    ],
  },
];
```

Perfecto!

Asi que "almacen es un array de tres objetos. Cada objeto tiene un `id`, un `departamiento` y un array de `productos`, donde cada producto es un objeto con `nombre`, `precio` y `stock`". Eso ya debería dar suficiente información para poder acceder cada elemento.

Y como te enseñé la última vez, si tienes que hacer un bucle para cada elemento, lo puedes hacer así:

 - **Array:**
   ```javascript
    for (elemento of miarray) {
        console.log(elemento)
    }
   ```
   ```javascript
    miarray.forEach(elemento => console.log(elemento))
   ```
   ```javascript
    for (i=0; i < miarray.length; i++) {
        console.log(miarray[i])
    }
   ```
 - **Objeto:**
   ```javascript
    for ([clave, valor] of Object.entries(miobjeto)) {
        console.log(clave, valor)
    }
   ```
   ```javascript
    Object.entries(miobjeto).forEach(([clave, valor]) => console.log(clave, valor))
   ```
   ```javascript
    for (clave of Object.keys(miobjeto)) { 
        console.log(clave, miobjeto[clave])
    }
   ```
   
J: *linea 346 <---- no es Object.values?*

Se puede usar tambien, pero "pierdes" la información de la clave, si no lo necesitas puedes usar `values()`.

J: *Vale, lo he entendido, o esto creo jajaj siempre surgen preguntas despues.
Voy a ponerme con la app que tengo que hacer, mi primer carrito de la compra con express :)*

J: *Vale una duda mas, entre Object.entries y for...in, cual es la diferencia, poor que los dos me van a devolver lo mismo no?*

Bueno, no, es bastante técnica la razón porque, pero `for..in` es "viejo" y está mal implementado. Te puede llevar sorpresas. Basicamente mejor _nunca_ usar `for..in`.

J: *"Buenas practicas"*

Algo asi, si. Por eso existe tambien un `for..of`, no por querer confundir, pero es la versión correcta de `for..in`. No podían "arreglar" el `for..in` porque hubiera roto basicamente todo el código del internet :-)

J: *Me encanta esta pizarra... es brutal! Desde luego no aprendi una cosa... si no varias! No cansaré de darte las gracias!!!*

*Deberias plantearte de hacer bootcamps... que hay gran diferencia entre como lo cuenta mi profe y como lo cuentas tu*

Gracias :-)

Pero no sé, enseñar nunca ha sido una ilusión mia. Contigo es más fácil porque me importas :-)

Pues para no saber tio. Esta preocupacion la tenia yo cuando empezaba dar clases de patinaje, y claro primeras clases estaba perdido, pero despues. Saber trasmitir y saber responder es a la duda "tonta", no todos saben hacerlo. De echo mi profe sigue recomendando *for..in* 

No, no es no saber es más no querer ;-)

Pero contigo lo estoy disfrutando :-)

Bueno, voy a por ello, de nuevo GRACIAS


Y estos herramientas como este sitio web... son una mina de oro. Los aprendo diariamente de mis compis. Es sorprendente do lo que hay por ahi.

Por cierto, estoy pensando en compartir contigo algo que descubri otro dia: se trata de un truco de CSS, muy tonto, pero me ha ahorrado muchisimas lineas de codigo de *media queries*

```css
.box {
    width: min(100% - 20px, 800px);
    margin-inline: auto;
}
```
Ya esta!

T: Y que hace?

indica ancho maximo de una contenedor, en nuestro caso 800px y el viewport es mas pequeño que este ancho, nuestro contenedor ocupara 100% de ancho y dejara 10px a los lados

*margin-inline*: son nuevas caracteristicas que permiten indicar margin solo vertical 
*margin-inline: val1:izq val2:derecha*

``` css
margin-inline: 20px 40px; 
```
es lo mimo que hacer:
```css
margin-left: 20px;
margin-right: 40px;
```

No sé si entiendo ese último ejemplo :-)
Aaaah ok!

NB: ya sabías escribir Markdown?

# header 1
## header 2
etc y poco mas. Es que en el curso tengo demaciada informacion. Y se que deberia aprender a dejar las cosas bonitas en presentaciones y todo esto. Pero ahoramismo no doy a mas


quier que veas los ejercicios de hoy
solo el primero y el ultimo

**1.Crea una aplicación express con una llamada de tipo get que devuelva el siguiente HTML: "Hola mundo desde express"**


**14. Crea una aplicación que simule una tienda online. Crea una variable almacén en la que guardes un array con objetos. Cada objeto será un departamento de la tienda y tendrás varios productos en cada uno. Cada uno de estos productos será un objeto con las siguientes propiedades: nombre, precio y stock. Crea también una variable cesta.
Crea las siguientes rutas:**
- Dos rutas diferentes para cada uno de los departamentos de la tienda.
- Una ruta devolverá en la respuesta todos los productos que hay en ese departamento. Haz que se muestre en una tabla HTML.
- La otra ruta servirá para comprar productos. Esta ruta recibirá dos parámetros: nombre del producto y cantidad. Añadir a la variable cesta el producto y la cantidad seleccionada Si la cantidad pedida es mayor que el stock, devolveremos un mensaje avisando de que no hay stock suficiente.
- Una ruta para mostrar la cesta.
- Una ruta para confirmar la compra. Esta ruta devolverá un mensaje de confirmación y vaciará la cesta.

y empezamos con Express HOY! 🤣 

Jejeje, entiendo que parece mucho.

J: Supongo que me pongo con ello y en una o dos horas lo tengo. Pero agobia

Si, me lo imagino. Te puedo decir que suena más complicado de lo que realmente es, pero la energia que tienes que gastar en entender el problema y como hacerlo no es poco!

Sigo lamentando pasar tantas horas el fin de semana para terminar el proyecto y no tomarmelo con mas calma.

Pero este gusano competidor que tengo dentro, me mata...

Ya. Claro en este caso sabiendo que muy probable que hay gente mirando para ver como lo esta haciendo todo el mundo... y lo importante que es para ti que todo esto funciona y sigue adelante

Ya lo han dejado tres personas :( hay mucha presion y mucho que ritmo muy intenso.

Pero me da la esperanza que al terminarlo en un o dos meses encontrar trabajo. Aprte en diciembre empezamos practicas con emprezas que vienen de visita. Ahí si que no puedo fallar, ya que suelen llevar a uno o dos con contrato de 6 meses de prueba  ^^

Eso! PD: Ida ya me ha dicho que en cualquier momento que quieres hablar con ella sobre entrevistas etc que ella encantada 

J: Dale las gracias, espero que a ella tambien le gust la cerveza, que de momento es lo unico que con lo que puedo pagar JAJAJA sto o un curso de preparacion de espresso en tu casa con tu cafetera ;)

jajajaj
cerveza si, café NO! jejeje

Siiiii!!
Hoy hablé con el chico que trabaja en el bar donde antes trabajaba ese amigo tuyo. Y me contó que conoce mucha gente que tiene la misma maquina que tengo yo. Que para tener algo en casa es bastante bueno.
Ahora sólo me falta manejarlo bien jeje


Lo es, lo es! Es mas facil de lo que creas ;) 
> Si, me lo imagino. Te puedo decir que suena más complicado de lo que realmente es, pero la energia que tienes que gastar en entender el problema y como hacerlo no es poco!
Tako :L452

Obviamente ya estoy tomando cafe todos los días con la maquinia. Sólo que todavía no me sale café muy bueno. Sale "ok". Tomable.

En todo esto, lo mas importante que sepas diferenciar entre, bueno, y bien echo. Me he tomado cafes de 93.75 puntos (la mas alta puntucion que he visto en mis 11 años), lo tomamos mal echo y sabian a gloria. y lo malo que estas cosas las consiguen en cantidades de 20g 

Esa puntuación es una indicación de la calidad del café?

Si busca info sobre SCA points el 100 es el tope, comercial de alta gama es de menos de 80, bar manolo, suelen ser unos 40-70 puntos, los supermercados 3€ por medio kg de cafe molidoy paquete boonito... menos de 40. 

Los de especialidad se consideran todos de mas de 80p. 84 si el coffeeshop se respeta a si mismo. cafés con mas de 90% representan 0.1% de producion undial

y encontrar cafés con mas de 93... es MUY MUY MUY MUY raro... es lo mismo que me digas que has echo un e-commerce sin abrir navegador, y al ponerlo en marcha no te ha dado ni un error 🤣🤣🤣🤣🤣 

jajajajaj


Bueno, me pongo con lo mio que si no... en 6 horas ya salgo de casa

Gracias!!! Espero no entretenerte mas hoy, así que buenas noches!

Buenas noches!!!! Un abrazo!
