JSON en JavaScript
La página anterior solo cambiaba la forma de la llamada, y this seguía esa llamada. Esta página deja eso a un lado. El producto sigue en memoria, con el nombre y el precio en el propio objeto. Si quieres entregar esos mismos datos a un archivo, a otro programa o a una página posterior, necesitas un texto con una forma fija. Ese texto se llama JSON.
El objeto vivo no es esta nota
Mientras el script corre, el literal sigue ahí y puedes ponerle un método; this sigue dependiendo de la llamada, como en la lección anterior. JSON es solo una cadena: no tiene métodos y no elige this.
Qué puede guardar el texto
📊 Objeto vivo frente a texto JSON
| Pieza | Literal de objeto | Texto JSON |
|---|---|---|
| Comillas de la clave | opcionales | comillas dobles obligatorias |
| Comillas del texto | simples o dobles | solo dobles |
| Coma final | permitida | prohibida |
| Función | puede ser un método | stringify la omite; escrita en el texto no vale |
| Campo undefined | un valor real | se omite cuando stringify recorre el objeto |
No metas en este texto los hábitos del literal. Cada clave y cada cadena necesitan comillas dobles. Una coma al final, un comentario dentro del texto y una función suelta no son JSON válido. La tabla dice qué hábito desaparece y qué ni siquiera acepta parse.
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));
stringify escribe la nota
JSON.stringify recorre los campos simples y devuelve una cadena; la consola muestra {"name":"Mug","price":12} y product no cambia. El nombre lo sigues leyendo en el objeto vivo y obtienes Mug. La cadena es otro valor, que puedes guardar o enviar.
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);
parse arma un valor desde la nota
text sigue siendo una cadena, con comillas y llaves. JSON.parse construye un objeto nuevo a partir de ese texto. Después product.name vale Mug. Aquí no se llama a ningún método y this no interviene.
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);
Una lista puede ir dentro de la nota
El texto JSON puede llevar un array; tras parse, product.tags es un array de verdad y la primera casilla es ceramic. El array como tema propio viene después, y aquí solo es carga dentro del texto.
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));
La nota guarda datos, no comportamiento
price valía undefined. tag era una función. Las dos desaparecen del texto. Lo impreso es solo {"name":"Mug"}. El comportamiento se queda en el objeto vivo y no viaja en la nota.
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}
Una nota descuidada no se lee
Las comillas simples y una clave sin comillas valen en un literal y no valen en JSON; por eso JSON.parse lanza un error y el catch imprime bad text en lugar de tumbar esta demo. Arregla el texto con comillas dobles en la clave y en la cadena. Esto todavía no es la lección de errores, solo muestra que un JSON mal formado detiene parse.
La dirección te dice la herramienta
De la memoria al texto vas con stringify, y del texto al valor vuelves con parse. Si luego necesitas una función en el producto, la añades después de parse, porque la nota no la trajo. this sigue dependiendo de la llamada y no de JSON, y la próxima lección son los arrays: una lista viva en el script, no otra regla de JSON.
Muestra un campo de la nota
Lee una cadena pequeña del producto con parse. Escribe el nombre en el párrafo. No armes el objeto con llaves dentro del script.
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>
El párrafo muestra Mug porque el script solo leyó texto y no construyó un literal. Cambia el nombre dentro de la cadena y recarga para que la línea lo siga.
Pasos de práctica
- Aplica stringify a la taza y lee el texto entre comillas; luego parse de esa misma forma y mira
Mug. - Lee la nota que incluye
tagsy obténceramic. - Aplica stringify a un objeto con método y precio
undefinedpara que en el texto quede soloname, y mete una nota con clave sin comillas entry/catchhasta verbad text. - En la demo HTML cambia solo el nombre dentro de la cadena, recarga y lee el párrafo.
Tropezones frecuentes
- Tratar el texto JSON como si fuera un literal, y pasar comillas simples o una clave desnuda a
parse - Esperar que un método o
undefinedsobrevivan astringify - Llamar a
parsecuando querías texto, o astringifycuando el texto ya estaba, y leer el nombre en la cadena en vez de en el valor que devolvióparse - Creer que la página siguiente sigue siendo JSON, cuando los arrays son una lista viva
Resumen
- JSON es texto que describe datos, y
stringifyconvierte un objeto sencillo en ese texto parsedevuelve el texto a un valor- La clave y la cadena piden comillas dobles; una coma final o comillas simples hacen fallar a
parse - Los métodos y los campos
undefinedsalen del texto - Un campo leído puede llenar una línea de la página, y lo siguiente son los arrays, una lista viva en el script
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior