Formatador JSON

Què és el formatatge JSON?

El formatatge JSON és el procés de transformar dades JSON en una representació consistent i fàcil de llegir per humans, afegint indentació, espais en blanc i salts de línia—sense alterar l'estructura ni el contingut. Un format correcte facilita la inspecció, la depuració, la compartició i l'edició, mantenint la compatibilitat amb màquines i eines de programari.

Per definició, JSON ignora els espais en blanc fora de les cadenes de text. Tanmateix, un JSON mal formatat (o minificat) — sense indentació o tot en una sola línia — pot ser gairebé impossible de llegir o modificar fiablement per humans.

Formatar vs. Minificar JSON

• Formatar afegeix espais, indentació i salts de línia per claredat i llegibilitat.
• Minificar elimina tots els espais innecessaris per maximitzar la compactació i l’eficiència en emmagatzematge o transferència.
• Un formatador JSON robust us permet alternar entre aquests modes, canviant fàcilment entre versions amigables per humans i optimitzades per a màquines quan cal.

Exemple: JSON Minificat vs. Format

{"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
}

Per què formatar JSON?

• Llegibilitat: Una bona indentació i salts de línia faciliten la inspecció d'objectes anidats, identificar errors i comprendre estructures complexes d’un cop d’ull.
• Depuració: Localitzar problemes amb dades invàlides o inesperades és més senzill quan es poden escanejar visualment claus, valors i nivells d’anidament.
• Col·laboració: El JSON ben format és més fàcil de revisar, discutir i editar en revisions de codi, documentació o fitxers compartits.
• Control de versions: Git i altres eines de VCS produeixen diffs més significatius amb JSON formatat, facilitant el seguiment de canvis al llarg del temps.
• Compliment: Moltes guies d’estil i linters automàtics (com Prettier, ESLint o jq) imposen un format consistent per claredat i estandardització.
• Compatibilitat amb eines: Algunes APIs, CLI i editors esperen una entrada formatada per a una interacció humana més senzilla o registre.

Com funciona un formatador JSON?

1. Anàlisi: El formatador primer intenta analitzar el text d’entrada amb un parser JSON estricte. Aquesta etapa comprova la validesa de sintaxi—captant problemes com cometes faltants, comes finals o caràcters no escapats.
2. Impressió amigable: Un cop vàlid, les dades analitzades es serialitzen en una cadena amb la indentació escollida (normalment 2 o 4 espais) i salts de línia, creant una versió "bonica".

Si l’entrada no és JSON vàlid, el formatador mostrarà un error o un missatge útil indicant la ubicació i la naturalesa del problema.

Opcions de formatatge

• Indentació: Defineix el nombre d’espais per nivell (fins a 8).
• Ordena les claus dels objectes alfabèticament
• Utilitza tabulacions en lloc d’espais per a la indentació
• Escapa caràcters no ASCII com a Unicode
• Minifica la sortida (en una sola línia, sense espais)

Problemes comuns que resol el formatatge

• JSON a una sola línia/minificat: dades provinents d’APIs o arxius de registre sovint són minificades per estalviar amplada de banda, dificultant la seva edició manual. El formatatge restaura la llegibilitat per a revisió i edició.
• Indentació inconsistent: JSON enganxat de diverses fonts pot contenir tabulacions, espais o profunditats de indentació incoherents. Reformatejar homogeneïtza aquestes diferències, millorant la claredat i la coherència.
• Estructures grans/anidades: arrays o objectes profundament anidats (com fitxers de configuració o respostes API complexes) es tornen manejables i fàcils de navegar quan es formategen, amb vistes desplegables a editors compatibles.

Cas d’ús real: formatar respostes API

Quan s’integren APIs de tercers (com AWS, Stripe o Google Cloud), sovint les respostes són compactades per velocitat. Formatejar la sortida JSON facilita la inspecció de camps que falten, la depuració de valors inesperats i la compartició amb l’equip.

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

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

Com formatar JSON amb aquesta eina

1. Enganxeu o pengeu el vostre JSON en brut, minificat o mal formatat a l’àrea d’entrada.
2. Seleccioneu les opcions de formatació (mida de la indentació, ordenar claus, etc.).
3. Feu clic a "Formatejar" per processar la vostra entrada.
4. Veieu o copieu la sortida neta i llegible. Si es detecten errors, apareixeran missatges detallats per ajudar-vos a corregir el JSON.

Tota la formatació es realitza de manera segura al vostre navegador—les vostres dades mai surten del dispositiu.

Exemples de codi per al formatat JSON

Descobreix com formatar JSON en diversos llenguatges de programació. Aquests exemples mostren tècniques bàsiques de formatatge per a desenvolupadors.

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)
}