Lección 17 · 17 de 20

JSON: stringify y parse · JavaScript

Convierta objetos de JavaScript en texto JSON con JSON.stringify y vuelva a obtenerlos con JSON.parse, para guardar partidas o leer datos de un servidor.

JavaScript · JSON: stringify y parse en DMarlon Studio: el código del ejemplo y su salida en la terminal

JSON es un formato de texto para datos, con la misma forma que los objetos y arrays de JavaScript. Es como se guardan configuraciones y como se mandan los datos entre un servidor y una aplicación web, por ejemplo una hecha con Next.js o React en DMarlon Studio.

`JSON.stringify()` convierte un valor en texto JSON: la partida guardada save pasa a ser una cadena (typeof text es string), lista para escribirla en un archivo o enviarla. Con un tercer argumento, JSON.stringify(valor, null, 2), el texto sale sangrado con dos espacios y se lee mucho mejor.

`JSON.parse()` hace el camino contrario: lee el texto y crea un objeto nuevo. loaded es una copia independiente, así que subirle el nivel no cambia save, que sigue en el 7.

Los datos que llegan de un servidor son texto, como reply, y se leen con JSON.parse. En JSON las claves y las cadenas van siempre entre comillas dobles, y existen null, números, booleanos, arrays y objetos.

JSON no tiene undefined ni funciones: al convertir item, las propiedades note y show desaparecen sin avisar.

Código · main.js

// An object in memory: a saved game.const save = {  player: "Nora",  level: 7,  inventory: ["sword", "potion"],  settings: { music: true, volume: 8 },};// JSON.stringify turns it into text, ready to store or send.const text = JSON.stringify(save);console.log(text);console.log("Type:", typeof text, "| Length:", text.length);// With a third argument, the text is indented and easier to read.console.log(JSON.stringify(save.settings, null, 2));// JSON.parse turns the text back into an object: a separate copy.const loaded = JSON.parse(text);loaded.level += 1;console.log(`${loaded.player} goes on to level ${loaded.level}`);console.log("Second item:", loaded.inventory[1], "| Saved level:", save.level);// Data from a server arrives as JSON text.const reply = '{"city":"Madrid","temps":[21,24,19],"rain":null}';const weather = JSON.parse(reply);console.log(weather.city, "| Max:", Math.max(...weather.temps), "| Rain:", weather.rain);// JSON has no undefined or functions: those keys are left out.const item = { name: "pen", note: undefined, price: 1.5, show: () => 1 };console.log(JSON.stringify(item));

Salida · node main.js

{"player":"Nora","level":7,"inventory":["sword","potion"],"settings":{"music":true,"volume":8}}
Type: string | Length: 95
{
  "music": true,
  "volume": 8
}
Nora goes on to level 8
Second item: potion | Saved level: 7
Madrid | Max: 24 | Rain: null
{"name":"pen","price":1.5}

Para recordar

JSON.stringify(valor) convierte en texto JSON.
JSON.stringify(valor, null, 2) lo sangra para leerlo.
JSON.parse(texto) crea un objeto nuevo a partir del texto.
JSON usa comillas dobles y no guarda undefined ni funciones.

Ejercicio

Añada a la partida un array achievements con dos logros, conviértala en JSON, léala de nuevo con JSON.parse, añada un logro a la copia y compruebe que el original sigue con dos.