¿Cómo usar JSON.stringify para formatear JSON?

¿Sabías que se puede parametrizar la función JSON.stringify de Javascript para darle formato a tú código?


El método JSON. stringify() convierte un objeto o valor de JavaScript en una cadena de texto JSON, opcionalmente reemplaza valores si se indica una función de reemplazo, o si se especifican las propiedades mediante un array de reemplazo.

Como usar JSON.stringify() para formatear un JSON

Partimos del siguiente objeto, con unos cuantos datos sobre un usuario frontend, servidor 🙃.

const frontend = {
  nombre: "Alex",
  apellido: "Tomás",
  poblacion: "Castellón",
  pais: "España",
  skills: ["react", "testing-library"],
};

El clásico JSON.stringify(frontend) no pintaría el código de la siguiente forma:

{"nombre":"Alex","apellido":"Tomás","poblacion":"Castellón","pais":"España","skills":["react","testing-library"]}

Muy vistoso e legible... pues no lo es mucho.

Pero podemos parametrizar un poco ésta función.

Formatear JSON.stringify con dos espacios

Sin en el tercer parámetro ponemos un 2

JSON.stringify(frontend, null, 2);

Obtendríamos como resultado:

{
  "nombre": "Alex",
  "apellido": "Tomás",
  "poblacion": "Castellón",
  "pais": "España",
  "skills": [
    "react",
    "testing-library"
  ]
}

Formatear JSON.stringify con tabs

Sin en el tercer parámetro ponemos un \t

JSON.stringify(frontend, null, "\t");

Obtendríamos como resultado:

{
	"nombre": "Alex",
	"apellido": "Tomás",
	"poblacion": "Castellón",
	"pais": "España",
	"skills": [
		"react",
		"testing-library"
	]
}

Formatear JSON.stringify con un caracter personalizado

Imagina, que por lo que sea, quieres que la indexación sea con un caracter a tu gusto, por ejemplo un guión y un punto (-.)

JSON.stringify(frontend, null, "-.");

Obtendríamos un resultado raro, pero sería personalizado por tí:

{
-."nombre": "Alex",
-."apellido": "Tomás",
-."poblacion": "Castellón",
-."pais": "España",
-."skills": [
-.-."react",
-.-."testing-library"
-.]
}

¿Conocías estas opciones?

Otras entradas del blog