JavaScript: ¿Cómo puedo generar formato JSON fácil de leer directamente desde un objeto? [duplicate]

2 minutos de lectura

Avatar de usuario de Ben Clayton
Ben Clayton

Posible duplicado:

¿Cómo puedo embellecer JSON programáticamente?

Sé cómo generar JSON a partir de un objeto usando JSON.stringify, o en mi caso el práctico jQueryJSON de Código de Google.

Ahora esto funciona bien, pero la salida es difícil de leer para los humanos. ¿Hay una manera, función o lo que sea fácil de generar un archivo JSON con un formato ordenado?

Esto es lo que quiero decir:

JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}});

da…

"{"a":1,"b":2,"c":{"d":1,"e":[1,2]}}"

Me gustaría algo como esto en su lugar:

{
 "a":1,
 "b":2,
 "c":{
    "d":1,
    "e":[1,2]
 }
}

Por ejemplo, con nuevas líneas y tabulaciones añadidas. Es mucho más fácil de leer para documentos más grandes.

Me gustaría hacer esto idealmente sin agregar grandes bibliotecas, por ejemplo, no Prototipo, YUIo lo que sea.

  • Tal vez esto ayude: jsoneditoronline.org

    – invot

    02/03/2016 a las 19:39

  • Ahora sabes por qué muchos prefieren XML en lugar de JSON. Es mucho más legible.

    – Herman van derblom

    1 de diciembre de 2021 a las 13:35

Avatar de usuario de Cristian Sánchez
Cristian Sánchez

JSON.stringify toma más argumentos opcionales.

Intentar:

 JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}}, null, 4); // Indented 4 spaces
 JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}}, null, "\t"); // Indented with tab

De:

¿Cómo puedo embellecer JSON programáticamente?

Debería funcionar en los navegadores modernos y está incluido en json2.js si necesita una alternativa para los navegadores que no admiten las funciones auxiliares de JSON. Para fines de visualización, coloque la salida en un <pre> etiqueta para obtener líneas nuevas para mostrar.

  • ¿No es esta respuesta un poco inexacta dado que el OP escribió su versión embellecida con el "e":[1,2] todo en una linea? ¿Es posible mezclar JSON con sangría y sin sangría con stringify?

    – chambelánpi

    7 de junio de 2016 a las 4:53

  • Solo recuerda ponerlo dentro de algo como

     para obtener nuevas líneas.
    

    – tymtam

    17/07/2016 a las 22:56

  • github.com/Phrogz/NeatJSON y npm.io/package/json-beautify proporciona más control y opciones para la codificación programática de JSON.

    – iislucas

    10 mayo 2022 a las 9:55

  • Puedes usar white-space: pre en lugar de un <pre>si tu prefieres.

    – Sam Duton

    4 de julio de 2022 a las 15:59

¿Ha sido útil esta solución?