Cómo utilizar JSON.parse() y JSON.stringify()

Introducción

El JSONobjeto , disponible en todos los navegadores modernos, tiene dos métodos útiles para tratar con contenido con formato JSON: parsey stringify.

JSON.parse()

JSON.parse()toma una cadena JSON y la transforma en un objeto JavaScript.

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';let userObj = JSON.parse(userStr);console.log(userObj);

La ejecución de este código producirá el siguiente resultado:

Output{name: 'Sammy', email: 'sammy@example.com', plan: 'Pro'}  email: "sammy@example.com"  name: "Sammy"  plan: "Pro"

Las comas finales no son válidas en JSON, por lo que JSON.parse()se genera un error si la cadena que se le pasa tiene comas finales.

JSON.parse()puede tomar una función como segundo argumento que puede transformar los valores del objeto antes de que se devuelvan.

Aquí los valores del objeto se transforman a mayúsculas en el objeto devuelto del parsemétodo:

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';let userObj = JSON.parse(userStr, (key, value) = {  if (typeof value === 'string') {    return value.toUpperCase();  }  return value;});console.log(userObj);

La ejecución de este código producirá el siguiente resultado:

Output{name: 'SAMMY', email: 'SAMMY@EXAMPLE.COM', plan: 'PRO'}  email: "SAMMY@EXAMPLE.COM"  name: "SAMMY"  plan: "PRO"

Los valores se han transformado a caracteres en mayúscula.

JSON.stringify()

JSON.stringify()toma un objeto JavaScript y lo transforma en una cadena JSON.

let userObj = {  name: "Sammy",  email: "sammy@example.com",  plan: "Pro"};let userStr = JSON.stringify(userObj);console.log(userStr);

La ejecución de este código producirá el siguiente resultado:

Output{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}

JSON.stringify()Puede tomar dos argumentos adicionales. El primero es una replacerfunción. El segundo es un valor Stringo Numberpara usar como a spaceen la cadena devuelta.

La función de reemplazo se puede utilizar para filtrar valores, ya que cualquier valor devuelto undefinedquedará fuera de la cadena devuelta:

let userObj = {  name: "Sammy",  email: "sammy@example.com",  plan: "Pro"};function replacer(key, value) {  console.log(typeof value);  if (key === 'email') {    return undefined;  }  return value;}let userStrReplacer = JSON.stringify(userObj, replacer);console.log(userStrReplacer);

La ejecución de este código producirá el siguiente resultado:

Output{"name":"Sammy","plan":"Pro"}

El emailpar clave-valor se ha eliminado del objeto.

Y un ejemplo con un spaceargumento pasado:

let userObj = {  name: "Sammy",  email: "sammy@example.com",  plan: "Pro"};let userStrSpace = JSON.stringify(user, null, '...');console.log(userStrSpace);

La ejecución de este código producirá el siguiente resultado:

Output{..."name": "Sammy",..."email": "sammy@example.com",..."plan": "Pro"}

La sangría ha sido reemplazada por ....

Conclusión

En este tutorial, utilizaste los métodos JSON.parse()y JSON.stringify(). Si quieres aprender más sobre cómo trabajar con JSON en Javascript, consulta nuestro tutorial Cómo trabajar con JSON en JavaScript .

Para obtener más información sobre la codificación en JavaScript, consulte nuestra serie Cómo codificar en JavaScript o consulte nuestra página de temas de JavaScript para obtener ejercicios y proyectos de programación.