Convertir objeto JavaScript a JSON

1. Visualización de objetos JavaScript con console.log(jsObject)
2. Uso de JSON.stringify() para convertir un objeto JSON en una cadena
3. Uso de código escrito personalizado para convertir objetos JavaScript a JSON
4. Recuperar un objeto JavaScript de una cadena JSON

JSON es un formato de transferencia de datos de uso común para representar objetos en javascript. Usamos el formato JSON como formato estándar en la mayoría de las comunicaciones cliente-servidor para transferir datos. La notación JSON es fácil de usar e interpretar, ya que es un formato legible por humanos de un objeto JavaScript. Es fácil convertir un objeto javascript a formato JSON. Podemos convertirlo de las siguientes formas.

Visualización de objetos JavaScript con console.log(jsObject)

La función console.log está construida para enviar mensajes a la consola web. Podemos ver los mensajes utilizando las herramientas de desarrollo de un navegador web. La función conosle.log() acepta un objeto, mensaje e incluso subcadenas. Por lo tanto, es más adecuado para ayudarnos a comprender el aspecto de un objeto JavaScript. Cuando console.log una variable que contiene un objeto, obtenemos su representación visual JSON. El siguiente código muestra la representación de un objeto javascript usando console.log.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(a);

Producción :

{id: 1, name: "icy-cream", flavor: "vanilla"}

En el código anterior, console.log(a) genera el formato JSON del objeto a. Recibiremos la misma representación JSON en todos los navegadores para el objeto javascript, ya que conosle.log() es compatible con todos los navegadores, incluido el hostil explorador de Internet. A través de la opción console.log(), solo podemos ver la representación JSON de un objeto y no podemos editarlo o usarlo para otro manejo de datos programático que no sea simplemente verlo en la consola web.

Uso de JSON.stringify() para convertir un objeto JSON en una cadena

Otra forma de obtener la representación JSON de un objeto javascript es mediante el método JSON.stringify(). Podemos usar el formato JSON de un objeto JavaScript y asignarlo a variables usando el método JSON.stringify(). JSON.stringify() convierte el objeto javascript y devuelve el valor JSON del objeto como datos de cadena.

Sintaxis

JSON.stringify(<JSObject>)

Parámetros

La función toma el objeto JavaScript como parámetro, acepta una función replacer y space count como parámetros opcionales.

• Le damos a nuestro objeto JavaScript de destino para convertir a JSON como el primer parámetro de la función JSON.stringify().
• Usamos la función replacer para alterar el objeto JSON. Utilizándolo, podemos especificar los atributos que deseamos filtrar del objeto antes de convertirlo en un formato JSON.
• El parámetro space count es un valor numérico o de cadena que especifica el número de caracteres de espacio que se colocarán en la cadena JSON de salida para que tenga un formato legible por humanos.

Valor devuelto

JSON.stringify() devuelve el formato JSON de cadena del objeto JavaScript.

Uso

Usemos el mismo objeto que usamos en la sección anterior. Pero esta vez, usaremos el JSON.stringify() para convertirlo en una cadena JSON. Consulte el siguiente código.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

Producción :

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

Usando un número en el tercer parámetro de la función JSON.stringify(), obtenemos una cadena JSON más legible como salida. El método formateará el JSON agregando el número especificado de espacios antes de cada par clave-valor del JSON. Por ejemplo, en JSON.stringify(a, null, 5), el parámetro id del objeto a se coloca después de cinco caracteres de espacio.

Uso de código escrito personalizado para convertir objetos JavaScript a JSON

Si vamos a escribir nuestro código para convertir el objeto JavaScript a formato JSON, tendremos que utilizar la función Object.keys(). Object.keys() es un método javascript que extrae las claves de un objeto y devuelve un array que contiene las claves. Por lo tanto, con nuestro código personalizado, combinamos las claves y los valores del objeto javascript y los englobamos dentro de las llaves {} para obtener la representación JSON del objeto javascript. Veamos el código a continuación.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
var keys = Object.keys(a);
var JSONOut = '{';
for (let i = 0; i < keys.length; i++) {
  JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + '}';
console.log(JSONOut);

Producción :

{"id":"1","name":"icy-cream","flavor":"vanilla",}

Recuperar un objeto JavaScript de una cadena JSON

En la mayoría de las aplicaciones web, almacenamos los objetos javascript como una cadena JSON en la base de datos para que sea fácil usarlos para renderizar la misma interfaz de usuario más tarde. Podemos almacenar el JSON en la base de datos como una cadena JSON. ¿Cómo recuperamos el JSON o el objeto JavaScript correspondiente a la cadena JSON extraída de la base de datos usando una API REST? JavaScript tiene el método JSON.parse() para convertir el JSON de nuevo en un objeto JavaScript. Consulte el siguiente código.

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

Producción :

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

Usando el código anterior, convertimos la cadena JSON de nuevo a un objeto javascript mediante el método JSON.parse() y lo asignamos a una variable. Cambiar el valor del atributo id del mismo objeto javascript también cambia el valor del atributo. Por lo tanto, podemos convertir la cadena JSON en un objeto JavaScript válido que podemos manejar mediante programación en el código. Tenga en cuenta que podemos usar el carácter de tilde para aceptar una cadena con varios saltos de línea.