Un tutorial sobre cómo trabajar con JSON.parse() y JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Un tutorial sobre cómo trabajar con JSON.parse() y JSON.stringify()

JSON significa JavaScript Object Notation. Se utiliza para describir JavaScript objetos. Es un formato de intercambio de datos que especifica valores de datos mediante pares clave-valor. El objeto JSON es compatible con todos los navegadores principales. Este tutorial requiere que estés familiarizado con JavaScript y con el trabajo con el objeto JSON. Para familiarizarte con JSON, puedes echar un vistazo a nuestra descripción general del formato de intercambio de datos JSON. También puedes consultar cómo trabajar con JSON en JavaScript.

El formato JSON también se utiliza para transmitir datos a través de la red. Para este propósito, los datos deben ser serializados y deserializados. Cuando los datos están en formato JSON, se convierten en una cadena utilizando el método stringify . Para volver a convertir los datos al formato de objeto para su manipulación, se utiliza el método parse . Este tutorial va a repasar los pasos para utilizar JSON.parse() y JSON.stringify(). ¡Comencemos!

JSON.parse()

Este método se utiliza para convertir una cadena JSON en un objeto JSON para que pueda ser manipulado mediante programación. La cadena que se pasa debe ser una cadena JSON válida; de lo contrario, se lanzará una excepción. Esta cadena se puede recibir de cualquier servicio web o aplicación remota.

Este método acepta dos parámetros: una cadena y una función de callback que se puede utilizar para manipular la cadena antes de convertirla en un objeto. Supongamos que recibimos un mensaje de un servicio web que indica el estado de la acción, el mensaje y el código de estado. A continuación se muestra un ejemplo sencillo de cómo se puede convertir una cadena en un objeto.

Código:

let json_string = '{"message":"Completado con éxito", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Completado con éxito", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Salida:

{message: 'Completado con éxito', status: 200, code: 200}

1	{message: 'Completado con éxito', status: 200, code: 200}

Un problema común ocurre cuando se añaden comas finales a la cadena, por lo que JSON.parse() lanza un error si la cadena que se le pasa tiene comas finales. Si necesitas manipular los valores, puedes pasar la función de callback como segundo argumento.

Código:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Salida:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

El método stringify hace exactamente lo contrario que el método parse . Aquí se pasa el objeto JSON y el valor devuelto es una cadena. Esta cadena se puede pasar a algún otro servicio web remoto, por ejemplo, y luego analizarse de nuevo en un objeto JSON para su manipulación.

Código:

let obj = {message:"Completado con éxito", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Completado con éxito", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Salida:

{"message":"Completado con éxito","status":200,"code":200}

1	{"message":"Completado con éxito","status":200,"code":200}

El método stringify puede tomar dos argumentos: los métodos replacer y spacer . El método replacer se puede utilizar para reemplazar o excluir cualquier valor en la cadena.

Código:

let obj = {message:"Completado con éxito", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Completado con éxito", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Salida:

{"message":"Hecho con éxito","status":200,"code":200}

1	{"message":"Hecho con éxito","status":200,"code":200}

Cuando el spacer argumento se proporciona, cada elemento de una matriz u objeto se coloca en su propia línea y se indenta para indicar su profundidad en la jerarquía de los objetos y matrices. A continuación se muestra un fragmento de código simple que ilustra esto.

Código:

let obj = {message:"Hecho con éxito", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Hecho con éxito", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Salida:

{
---"message": "Hecho con éxito",
---"status": 200,
---"code": 200
}

{

---"message": "Hecho con éxito",

---"status": 200,

---"code": 200

}

Conclusión

En este tutorial, analizamos dos métodos útiles para trabajar con contenido en formato JSON. Los objetos JSON están en todas partes y, al crear aplicaciones modernas con JavaScript, estos métodos son muy útiles. Para obtener más información, consulte los siguientes tutoriales en nuestro blog:

¡Feliz programación!

Hark Labs

Autor · CloudSigma

Preslav Dobrev es diseñador creativo en CloudSigma, centrado en una identidad empresarial coherente mediante el uso de canales de marketing tradicionales e innovadores. Es experto en fusionar la visión artística con el marketing estratégico para crear narrativas de marca impactantes.

Un tutorial sobre cómo trabajar con JSON.parse() y JSON.stringify()

JSON.parse()

JSON.stringify()

Conclusión

Hark Labs

Comentarios