Intentando entender un append (JSON)

srwik · #1 (**permalink**) 11/04/2019, 04:47

Muy buenas,

Estoy intentando entender un código que he visto (ingeniería inversa

) pero no llego a entender el funcionamiento del append.

Es un problema de novato total, pero bueno, llevo atascado un día aquí y no encuentro la lógica.

Os pongo el código HTML:

Código HTML:

<!DOCTYPE HTML>
<html lang="es">

<head>
	<meta charset="utf-8">
	<title>Operando con JSON</title>
	
</head>
<body>
	<h1>JSON</h1>
	<div id="coins">
		<h2>Monedas</h2>
	</div>

	<script type="text/javascript" src="js/json.js"></script>
</body>

</html>

Javascript:

Código:

'use strict'

// JSON - Javascript Object Notation


var cryptos = {
	titulo: 'Bitcoin',
	year: 2009,
	creador: 'Satoshi Nakamoto'
};

var monedas = [
	{titulo: "Euro", year: 2000, pais: "España"},
	cryptos
];


var caja_monedas = document.querySelector("#coins");
var index;
for (index in monedas){
	var p = document.createElement("p");
	p.append(monedas[index].titulo + " - " + monedas[index].year);
	caja_monedas.append(p);
}

Por lo que entiendo ocurre lo siguiente:

1. Se crea una variable llamada caja_monedas que es un querySelector del div con id #coins. Esto se utiliza para modificar dicho div.
2. Se crea un bucle for in donde primero se forma una variable (p) donde se crea el elemento .
3. En el mismo bucle se concatena el con el array mediante un append -> p.append(monedas[index].titulo + " - " + monedas[index].year);
4. Se concatena caja_monedas con el .

Creo que lo estoy analizando mal porque no tiene sentido según lo entiendo.
En todo caso, se debería concatenar de esta forma:

querySelector++array+

Es decir, el querySelector es quien da la "orden" de modificar ese div en el html, seguido de para abrir párrafo y por último el array. Pero esa última línea de javascript...me da que no lo estoy entiendo bien.

¿Algún rayo de luz?

Gracias!!

Panino5001 · #2 (**permalink**) 12/04/2019, 05:30

Cita:

Iniciado por srwik

Por lo que entiendo ocurre lo siguiente:

1. Se crea una variable llamada caja_monedas que es un querySelector del div con id #coins. Esto se utiliza para modificar dicho div.
2. Se crea un bucle for in donde primero se forma una variable (p) donde se crea el elemento .
3. En el mismo bucle se concatena el con el array mediante un append -> p.append(monedas[index].titulo + " - " + monedas[index].year);
4. Se concatena caja_monedas con el .

1. Lo que se crea ahí es una referencia a un div que ya está añadido al documento. No es "una variable para modificar un div" sino punto de memoria que apunta al div en sí mismo.
2. Mismo error de concepto: no hablamos de variable sino de referencia al elemento párrafo.
Para ser más claro, no es texto sino objeto html. La única diferencia con el html normal es que aún no se añade al documento (al DOM, más precisamente).
3. No se concatena nada porque no es un texto que se pega junto a otro texto. Al elemento párrafo creado en cada iteración del bucle se le define el contenido, es decir, se le añade un nodo de texto que contiene los datos del JSON que se está recorriendo con el for in (título y año).
4. No se concatena: una vez que le pusimos contenido al párrafo, lo agregamos (lo insertamos como nodo html) al documento, pero dentro del elemento div al que hicimos referencia en el punto 1.

Básicamente, creo que estás confundiendo append, que es como appendChild, es decir, un método para agregar nodos html, con innerHTML, que es un método que sí agrega html a partir de un texto con formato html.

srwik · #3 (**permalink**) 13/04/2019, 13:19

Cita:

Iniciado por Panino5001

1. Lo que se crea ahí es una referencia a un div que ya está añadido al documento. No es "una variable para modificar un div" sino punto de memoria que apunta al div en sí mismo.
2. Mismo error de concepto: no hablamos de variable sino de referencia al elemento párrafo.
Para ser más claro, no es texto sino objeto html. La única diferencia con el html normal es que aún no se añade al documento (al DOM, más precisamente).
3. No se concatena nada porque no es un texto que se pega junto a otro texto. Al elemento párrafo creado en cada iteración del bucle se le define el contenido, es decir, se le añade un nodo de texto que contiene los datos del JSON que se está recorriendo con el for in (título y año).
4. No se concatena: una vez que le pusimos contenido al párrafo, lo agregamos (lo insertamos como nodo html) al documento, pero dentro del elemento div al que hicimos referencia en el punto 1.

Básicamente, creo que estás confundiendo append, que es como appendChild, es decir, un método para agregar nodos html, con innerHTML, que es un método que sí agrega html a partir de un texto con formato html.

Mil gracias por tu tiempo y explicación.

Entiendo ahora mucho mejor la estructura y me quedo con una pequeña duda.

En el punto 4 cuando le hacemos el append a caja_monedas con p, al haberse definido anteriormente a p los datos del JSON con otro append ¿Este los guarda ya a partir de ahí?

Es decir, la referencia p a partir de ese punto ya no es solo "document.createElement("p")", sino que ahora contiene el JSON y al añadirla a caja_monedas también trae el append anterior.

Sería como una bola de nieve que ha ido recogido elementos por el camino.

Si es así me quedó clarísimo

Muchas gracias de nuevo

Panino5001 · #4 (**permalink**) 14/04/2019, 15:47

En cada iteración del bucle sucede esto:

Código:

for (index in monedas){
        //se crea un nodo párrafo que aún no se añade al DOM
	var p = document.createElement("p");
       
       //se crea un nodo de texto con el contenido del elemento del JSON
       //que estemos recorriendo en esta iteración y ese nodo de texto se 
       //agrega al párrafo que aún no hemos agregado al DOM
       p.append(monedas[index].titulo + " - " + monedas[index].year);

       //ahora sí se agrega al DOM el párrafo creado y, como ese párrafo ya tiene
       //dentro un nodo de texto, dicho nodo es agregado al DOM. 
	caja_monedas.append(p);
}

Eso pasa por cada uno de los objetos contenidos en el array monedas.

Para hacerlo más entendible, podemos hacer una analogía: imagina que tienes 3 papeles escritos que debes guardar en 3 carpetas diferentes dentro de un maletín.
Como son 3 papeles y con todos debes hacer casi lo mismo, puedes dividir la tarea en 3 repeticiones (iteraciones o vueltas del bucle). Y en cada repetición buscas 1 carpeta (creación del párrafo), pones dentro de ella uno de los papeles escritos (creas y añades el nodo de texto al párrafo) y finalmente guardas la carpeta dentro del maletín (agregado del párrafo y su contenido al div de id coins).

Cuando termines la tarea tendrás dentro del maletín 3 carpetas cada una de las cuales contiene un papel escrito.
De la misma manera, cuando el bucle for in termine su tarea tendrás dentro del div de id coins tantos párrafos con texto escrito como elementos tenga el array de objetos monedas (en tu ejemplo serían 2 párrafos).

srwik · #5 (**permalink**) 14/04/2019, 19:05

Mejor imposible. Entendido al máximo!

Muchas gracias!!