Formateador JSON

¿Qué es el formateo JSON?

El formateo JSON es el proceso de transformar datos JSON en una representación consistente y legible para humanos añadiendo indentación, espacios en blanco y saltos de línea, sin alterar su estructura ni contenido. Un formateo adecuado facilita la inspección, depuración, compartición y edición del JSON, manteniendo la compatibilidad con máquinas y herramientas de software.

JSON, por definición, ignora los espacios en blanco fuera de los valores cadena. Sin embargo, JSON mal formateado (o minimizado)—sin indentación o en una sola línea—puede ser casi imposible de leer o modificar de forma confiable para humanos.

Formatear vs. Minimizar JSON

• Formatear añade espacios, indentación y saltos de línea para claridad y legibilidad.
• Minimizar elimina todos los espacios innecesarios para máxima compacidad y eficiencia en almacenamiento o transferencia.
• Un formateador robusto permite alternar entre estos modos, facilitando cambiar entre versiones amigables para humanos y optimizadas para máquinas según sea necesario.

Ejemplo: JSON minimizado vs. formateado

{"id":"3f4b2c","user":{"name":"Dana","is_active":true},"roles":["admin","editor"],"count":7}

{
  "id": "3f4b2c",
  "user": {
    "name": "Dana",
    "is_active": true
  },
  "roles": [
    "admin",
    "editor"
  ],
  "count": 7
}

¿Por qué formatear JSON?

• Legibilidad: La indentación correcta y los saltos de línea facilitan inspeccionar objetos anidados, detectar errores y comprender estructuras de datos complejas rápidamente.
• Depuración: Solucionar problemas con datos inválidos o inesperados es mucho más sencillo cuando puedes escanear visualmente y rastrear claves, valores y niveles de anidamiento.
• Colaboración: JSON bien formateado es más fácil de revisar, discutir y editar en revisiones de código, documentación o archivos compartidos.
• Control de versiones: Git y otras herramientas VCS generan diferencias más significativas con JSON formateado, facilitando el seguimiento de cambios a lo largo del tiempo.
• Cumplimiento: Muchas guías de estilo y linters automáticos (como Prettier, ESLint o jq) exigen formateo consistente para mayor claridad y estandarización.
• Compatibilidad: Algunas APIs, interfaces de línea de comandos y editores requieren entradas formateadas para facilitar la interacción humana o el registro.

¿Cómo funciona un formateador JSON?

1. Análisis: El formateador intenta primero analizar tu texto de entrada usando un parser JSON estricto. Este paso verifica la validez sintáctica, detectando problemas como comillas faltantes, comas finales o caracteres no escapados.
2. Presentación bonita: Una vez válido, los datos parseados se serializan nuevamente en una cadena con la indentación definida por el usuario (usualmente 2 o 4 espacios) y saltos de línea, creando una versión "bonita".

Si la entrada no es un JSON válido, el formateador mostrará un error o un mensaje útil indicando la ubicación y naturaleza del problema.

Opciones de formateo

• Indentación: Configura la cantidad de espacios por nivel (hasta 8).
• Ordenar las claves de objetos alfabéticamente
• Usar tabulaciones en lugar de espacios para la indentación
• Escapar caracteres no ASCII como Unicode
• Minimizar salida (una línea, sin espacios)

Problemas comunes solucionados con el formateo

• JSON en una línea/minimizado: Los datos de APIs o archivos de registro suelen estar minimizados para ahorrar ancho de banda, dificultando la edición manual. El formateo restaura la legibilidad para revisión y edición.
• Indentación inconsistente: JSON copiado de diversas fuentes puede mezclar tabulaciones, espacios o tener diferentes niveles de indentación. Reformatear normaliza estas diferencias, mejorando claridad y consistencia.
• Estructuras grandes/anidadas: Arreglos u objetos profundamente anidados (como archivos de configuración o respuestas complejas de API) se vuelven manejables y fáciles de navegar al formatearlos, con vistas colapsables en editores compatibles.

Caso real: Formateo de respuestas de API

Al integrar con APIs de terceros (como AWS, Stripe o Google Cloud), las respuestas suelen estar compactas para mayor rapidez. Formatear el JSON facilita inspeccionar campos faltantes, depurar valores inesperados o compartir con compañeros.

{"amount":2500,"currency":"usd","status":"succeeded","charges":[{"id":"ch_1Gq","amount":2500}]}

{
  "amount": 2500,
  "currency": "usd",
  "status": "succeeded",
  "charges": [
    {
      "id": "ch_1Gq",
      "amount": 2500
    }
  ]
}

Cómo formatear JSON con esta herramienta

1. Pega o sube tu JSON crudo, minimizado o mal formateado en el área de entrada.
2. Selecciona las opciones de formateo (tamaño de indentación, ordenar claves, etc.).
3. Haz clic en "Formatear" para procesar tu entrada.
4. Visualiza o copia el resultado limpio y legible. Si hay errores, aparecerán mensajes detallados de sintaxis para ayudarte a corregir el JSON.

Todo el formateo se realiza de forma segura en tu navegador; tus datos nunca salen de tu dispositivo.

Ejemplos de Código para Formateo JSON

Descubre cómo formatear JSON en varios lenguajes de programación. Estos ejemplos muestran técnicas básicas de formato para optimizar tu código.

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

import json
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = json.dumps(json.loads(ugly), indent=2)
print(pretty)

package main
import (
  "encoding/json"
  "fmt"
)
func main() {
  ugly := []byte(`{"name":"Alice","age":30,"roles":["admin","user"]}`)
  var obj interface{}
  json.Unmarshal(ugly, &obj)
  pretty, _ := json.MarshalIndent(obj, "", "  ")
  fmt.Println(string(pretty))
}

import com.fasterxml.jackson.databind.ObjectMapper;
public class Main {
  public static void main(String[] args) throws Exception {
    String ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    ObjectMapper mapper = new ObjectMapper();
    Object obj = mapper.readValue(ugly, Object.class);
    String pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj);
    System.out.println(pretty);
  }
}

using System;
using Newtonsoft.Json;
class Program {
  static void Main() {
    var ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    var parsed = JsonConvert.DeserializeObject(ugly);
    var pretty = JsonConvert.SerializeObject(parsed, Formatting.Indented);
    Console.WriteLine(pretty);
  }
}

<?php
$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
$obj = json_decode($ugly);
echo json_encode($obj, JSON_PRETTY_PRINT);

require 'json'
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = JSON.pretty_generate(JSON.parse(ugly))
puts pretty

echo '{"name":"Alice","age":30,"roles":["admin","user"]}' | jq .

fn main() {
  let ugly = r#"{"name":"Alice","age":30,"roles":["admin","user"]}"#;
  let value: serde_json::Value = serde_json::from_str(ugly).unwrap();
  let pretty = serde_json::to_string_pretty(&value).unwrap();
  println!("{}", pretty);
}

import com.fasterxml.jackson.databind.ObjectMapper
fun main() {
  val ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}"
  val mapper = ObjectMapper()
  val obj = mapper.readValue(ugly, Any::class.java)
  val pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj)
  println(pretty)
}

import Foundation
let ugly = "{\"name\":\"Alice\",\"age\":30,\"roles\":[\"admin\",\"user\"]}"
if let data = ugly.data(using: .utf8),
   let obj = try? JSONSerialization.jsonObject(with: data),
   let pretty = try? JSONSerialization.data(withJSONObject: obj, options: .prettyPrinted),
   let prettyString = String(data: pretty, encoding: .utf8) {
    print(prettyString)
}

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

SELECT jsonb_pretty('{"name":"Alice","age":30,"roles":["admin","user"]}'::jsonb);

SELECT JSON_PRETTY('{"name":"Alice","age":30,"roles":["admin","user"]}');

$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
$obj = $ugly | ConvertFrom-Json
$pretty = $obj | ConvertTo-Json -Depth 10
Write-Output $pretty

use JSON;
my $ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
my $obj = decode_json($ugly);
print to_json($obj, { pretty => 1 });

import 'dart:convert';
void main() {
  const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
  final obj = jsonDecode(ugly);
  final pretty = JsonEncoder.withIndent('  ').convert(obj);
  print(pretty);
}

ugly = ~s({"name":"Alice","age":30,"roles":["admin","user"]})
{:ok, obj} = Jason.decode(ugly)
pretty = Jason.encode!(obj, pretty: true)
IO.puts(pretty)

import play.api.libs.json._
object Main extends App {
  val ugly = """{"name":"Alice","age":30,"roles":["admin","user"]}"""
  val jsValue = Json.parse(ugly)
  val pretty = Json.prettyPrint(jsValue)
  println(pretty)
}