Whiz Tools

Formatador de JSON

Format i embelleix el teu JSON amb aquesta eina senzilla

El JSON formatat apareixerà aquí...

Formatador JSON

Introducció

JSON (JavaScript Object Notation) és un format d'intercanvi de dades lleuger que s'ha convertit en l'estàndard per a l'intercanvi de dades en aplicacions web. Malgrat la seva simplicitat, les dades JSON poden esdevenir difícils de llegir quan estan minificades o manquen de format adequat. Aquesta eina t'ajuda a transformar cadenes JSON en brut i sense format en un format ben estructurat i amb indentació que és molt més fàcil de llegir i analitzar.

El formatatge JSON (també conegut com a "impressió bonica") afegeix una indentació consistent, salts de línia i espai per fer que l'estructura jeràrquica de les dades JSON sigui visualment apparent. Això és particularment valuós quan es treballa amb objectes o conjunts de dades complexos on les relacions entre els elements podrien ser difícils de discernir.

La nostra eina formatadora JSON proporciona una interfície senzilla per embelleixer les teves dades JSON amb la indentació i estructura adequades, fent-les més llegibles per als humans mentre manté la seva validesa per a les màquines.

Sintaxi i Estructura JSON

JSON es basa en dues estructures principals:

  1. Objectes: Col·leccions de parells nom/valor tancades entre claus {}. Cada nom és seguit d'un dos punts : i els parells estan separats per comes ,.
   {"nom": "John", "edat": 30, "ciutat": "Nova York"}
   
  1. Arrays: Llistes ordenades de valors tancades entre claudàtors []. Els valors estan separats per comes ,.
   ["poma", "plàtan", "cirera"]
   

Els valors JSON poden ser:

  • Cadenes (entre cometes dobles): "Hola món"
  • Nombres: 42 o 3.14159
  • Booleans: true o false
  • Null: null
  • Objectes: {"clau": "valor"}
  • Arrays: [1, 2, 3]

El JSON correcte ha de seguir aquestes regles de sintaxi:

  • Els noms han de ser cadenes entre cometes dobles
  • Els valors han de ser un dels tipus de dades JSON vàlids
  • No s'admeten comes finals
  • No s'admeten comentaris
  • No s'admeten funcions o mètodes

Els errors de sintaxi comuns inclouen:

  • Claus o claudàtors que falten o no coincideixen
  • Falta de cometes al voltant dels noms de propietats
  • Ús de cometes simples en lloc de cometes dobles
  • Inclusió de comes finals
  • Ús de valors indefinits

Com Funciona el Formatatge JSON

El formatatge JSON transforma JSON compacte i minificat en una forma més llegible mitjançant:

  1. Anàlisi: La cadena JSON es processa primer per assegurar-se que és vàlida i per crear una representació en memòria de l'estructura de dades.

  2. Indentació: Cada nivell de profunditat d'objectes i arrays s'indenta (normalment amb 2 o 4 espais) per representar visualment la jerarquia.

  3. Sauts de línia: S'afegeixen noves línies després de cada propietat o element d'array per millorar la llegibilitat.

  4. Espai: S'afegeix espai consistent al voltant dels dos punts i les comes.

Per exemple, aquest JSON minificat:

{"nom":"John Doe","edat":30,"adreça":{"carrer":"123 Main St","ciutat":"Anytown","estat":"CA"},"aficions":["lectura","senderisme","fotografia"]}

Es converteix en aquest JSON formatat:

{
  "nom": "John Doe",
  "edat": 30,
  "adreça": {
    "carrer": "123 Main St",
    "ciutat": "Anytown",
    "estat": "CA"
  },
  "aficions": [
    "lectura",
    "senderisme",
    "fotografia"
  ]
}

El nostre formatador utilitza una indentació estàndard de 2 espais per nivell, que és una convenció comuna en la comunitat de desenvolupament i proporciona un bon equilibri entre la compactació i la llegibilitat.

Validació JSON

Un aspecte crític del formatatge JSON és la validació. Abans que JSON pugui ser formatat, ha de ser sintàcticament vàlid segons l'especificació JSON. Els errors de validació comuns inclouen:

  1. Errors de Sintaxi:

    • Noms de propietats no entre cometes
    • Comes que falten o són de més
    • Estructures incorrectament anidades
    • Cadenes, objectes o arrays no tancats
  2. Errors de Tipus de Dades:

    • Ús de valors específics de JavaScript com undefined o NaN
    • Inclusió de funcions o mètodes
    • Ús de cometes simples per a cadenes

Quan et trobes amb JSON no vàlid, el missatge d'error pot ajudar a identificar el problema. La majoria dels analitzadors JSON indicaran la posició on la anàlisi ha fallat, cosa que pot ajudar a localitzar el problema. La nostra eina proporciona missatges d'error clars per ajudar-te a identificar i solucionar problemes en les teves dades JSON.

Casos d'Ús

El formatatge JSON és valuós en nombrosos escenaris:

Desenvolupament i Prova d'API

Quan treballes amb APIs RESTful, el JSON formatat facilita:

  • Inspeccionar càrregues útils de resposta
  • Depurar cossos de sol·licituds
  • Documentar exemples d'API
  • Verificar que les estructures de dades coincideixin amb les expectatives

Gestió de Configuracions

Moltes aplicacions modernes utilitzen JSON per a la configuració:

  • Fitxers de configuració d'aplicacions
  • Configuracions d'entorn
  • Especificacions de compilació i desplegament
  • Plantilles d'Infraestructura com a Codi (per exemple, AWS CloudFormation, Terraform)

Anàlisi de Dades i Visualització

El JSON formatat ajuda quan:

  • Explores conjunts de dades
  • Preparar dades per a la visualització
  • Entendre esquemes de dades
  • Identificar patrons en dades estructurades

Depuració i Resolució de Problemes

La formatació JSON adequada és essencial quan:

  • Depures aplicacions web
  • Inspecciones localStorage o sessionStorage
  • Analitzes respostes de xarxa
  • Resol els problemes d'integració de dades

Propòsits Educatius

Una formatació JSON clara és valuosa per a:

  • Ensenyar estructures de dades
  • Demostrar relacions anidades
  • Explicar conceptes d'API
  • Il·lustrar principis de modelatge de dades

Alternatives

Tot i que el nostre formatador JSON basat en web és convenient per a tasques ràpides de formatatge, existeixen diverses alternatives per a diferents escenaris:

Eines de Desenvolupador del Navegador

Els navegadors moderns inclouen capacitats de formatatge JSON:

  • Les DevTools de Chrome i Edge formatan automàticament les respostes JSON a la pestanya Xarxa
  • El visualitzador JSON de Firefox proporciona una vista interactiva d'arbre
  • Extensions de navegador com JSONView poden formatar JSON directament al navegador

Editors de Codi i IDEs

La majoria dels entorns de desenvolupament ofereixen formatatge JSON:

  • Visual Studio Code té formatatge JSON integrat (Alt+Shift+F)
  • Els IDEs de JetBrains (WebStorm, IntelliJ) inclouen potents eines JSON
  • Sublime Text i Atom admeten el formatatge JSON mitjançant plugins

Eines de Línia de Comandament

Per a usuaris de terminal o automatització:

  • jq és un potent processador de JSON de línia de comandament
  • json_pp ve preinstal·lat en molts sistemes Unix
  • python -m json.tool proporciona un formatatge ràpid mitjançant Python

Enfocaments Programàtics

Quan formateges JSON dins d'aplicacions:

// JavaScript
const formatted = JSON.stringify(jsonObject, null, 2);
# Python
import json
formatted = json.dumps(json_object, indent=2)
// Java amb Gson
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String formatted = gson.toJson(jsonObject);
# Ruby
require 'json'
formatted = JSON.pretty_generate(json_object)
// PHP
$formatted = json_encode($jsonObject, JSON_PRETTY_PRINT);

Història

JSON va ser creat per Douglas Crockford a principis dels anys 2000 com una alternativa lleugera a XML. El format es va derivar de la sintaxi de literals d'objectes de JavaScript, però dissenyat per ser independent del llenguatge. El 2006, JSON es va especificar formalment a l'RFC 4627, i ràpidament va guanyar popularitat gràcies a la seva simplicitat i compatibilitat amb JavaScript.

Abans de JSON, XML era el format dominant per a l'intercanvi de dades, però la seva verbositat i complexitat el feien pesat per a moltes aplicacions. JSON va oferir una sintaxi més concisa que era més fàcil de llegir i escriure, tant per als humans com per a les màquines. També s'ajustava perfectament al model d'objectes de JavaScript, convertint-se en l'elecció natural per a les aplicacions web.

L'adopció de JSON es va accelerar amb l'augment d'AJAX i les APIs RESTful a mitjans dels anys 2000. A principis dels anys 2010, s'havia convertit en l'estàndard de facto per a APIs web, fitxers de configuració i emmagatzematge de dades en bases de dades NoSQL com MongoDB i CouchDB.

Avui, JSON és compatible amb pràcticament tots els llenguatges de programació i s'utilitza en infinitat d'aplicacions a la web. La seva simplicitat, flexibilitat i suport universal l'han convertit en un dels formats de dades més importants en la computació moderna.

Exemples de Codi

Aquí hi ha exemples de com formatar JSON en diversos llenguatges de programació:

// Formatatge JSON en JavaScript
function formatJSON(jsonString) {
  try {
    const parsedData = JSON.parse(jsonString);
    return JSON.stringify(parsedData, null, 2);
  } catch (error) {
    return `Error: ${error.message}`;
  }
}

// Exemple d'ús
const rawJSON = '{"nom":"John","edat":30,"ciutat":"Nova York"}';
console.log(formatJSON(rawJSON));
# Formatatge JSON en Python
import json

def format_json(json_string):
    try:
        parsed_data = json.loads(json_string)
        return json.dumps(parsed_data, indent=2)
    except json.JSONDecodeError as e:
        return f"Error: {str(e)}"

# Exemple d'ús
raw_json = '{"nom":"John","edat":30,"ciutat":"Nova York"}'
print(format_json(raw_json))
// Formatatge JSON en Java amb Gson
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonSyntaxException;

public class JSONFormatter {
    public static String formatJSON(String jsonString) {
        try {
            Gson gson = new GsonBuilder().setPrettyPrinting().create();
            Object parsedJson = gson.fromJson(jsonString, Object.class);
            return gson.toJson(parsedJson);
        } catch (JsonSyntaxException e) {
            return "Error: " + e.getMessage();
        }
    }
    
    public static void main(String[] args) {
        String rawJSON = "{\"nom\":\"John\",\"edat\":30,\"ciutat\":\"Nova York\"}";
        System.out.println(formatJSON(rawJSON));
    }
}
// Formatatge JSON en PHP
function formatJSON($jsonString) {
    $result = json_decode($jsonString);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return "Error: " . json_last_error_msg();
    }
    return json_encode($result, JSON_PRETTY_PRINT);
}

// Exemple d'ús
$rawJSON = '{"nom":"John","edat":30,"ciutat":"Nova York"}';
echo formatJSON($rawJSON);
# Formatatge JSON en Ruby
require 'json'

def format_json(json_string)
  begin
    parsed_data = JSON.parse(json_string)
    return JSON.pretty_generate(parsed_data)
  rescue JSON::ParserError => e
    return "Error: #{e.message}"
  end
end

# Exemple d'ús
raw_json = '{"nom":"John","edat":30,"ciutat":"Nova York"}'
puts format_json(raw_json)
// Formatatge JSON en C# amb Newtonsoft.Json
using Newtonsoft.Json;
using System;

class JSONFormatter
{
    public static string FormatJSON(string jsonString)
    {
        try
        {
            object parsedJson = JsonConvert.DeserializeObject(jsonString);
            return JsonConvert.SerializeObject(parsedJson, Formatting.Indented);
        }
        catch (JsonException e)
        {
            return $"Error: {e.Message}";
        }
    }
    
    static void Main()
    {
        string rawJSON = "{\"nom\":\"John\",\"edat\":30,\"ciutat\":\"Nova York\"}";
        Console.WriteLine(FormatJSON(rawJSON));
    }
}
// Formatatge JSON en Go
package main

import (
    "encoding/json"
    "fmt"
)

func formatJSON(jsonString string) string {
    var parsedData interface{}
    err := json.Unmarshal([]byte(jsonString), &parsedData)
    if err != nil {
        return fmt.Sprintf("Error: %s", err.Error())
    }
    
    formattedBytes, err := json.MarshalIndent(parsedData, "", "  ")
    if err != nil {
        return fmt.Sprintf("Error: %s", err.Error())
    }
    
    return string(formattedBytes)
}

func main() {
    rawJSON := `{"nom":"John","edat":30,"ciutat":"Nova York"}`
    fmt.Println(formatJSON(rawJSON))
}

Casos Extrems i Consideracions

Quan treballes amb el formatatge JSON, tingues en compte aquests possibles reptes:

Fitxers JSON Grans

Fitxers JSON molt grans (varis megabytes o més) poden causar problemes de rendiment en formatadors basats en navegadors. Per a aquests casos:

  • Considera utilitzar eines de línia de comandament com jq
  • Divideix el JSON en trossos més petits
  • Utilitza analitzadors de streaming per processar sense carregar tot el fitxer a la memòria

Estructures Profundes

JSON extremadament anidat (més de 10-20 nivells de profunditat) pot esdevenir difícil de navegar fins i tot quan està formatat. En aquests casos:

  • Considera aplanar l'estructura si és possible
  • Utilitza visualitzadors JSON col·lapsables
  • Extreu i treballa amb seccions específiques del JSON

Caracteres Especials i Unicode

JSON admet Unicode, però alguns formatadors poden tenir problemes amb certs caràcters:

  • Assegura't que el teu formatador gestioni correctament emojis i altres caràcters Unicode
  • Tingues cura amb caràcters de control i seqüències d'escapament
  • Verifica que la sortida formatada preservi tots els caràcters originals

Precisió Numèrica

JSON no especifica precisió per als nombres, cosa que pot provocar problemes amb enters molt grans o valors de punt flotant:

  • Tingues en compte que algunes implementacions de JavaScript poden perdre precisió per a enters més enllà de 53 bits
  • Considera utilitzar representacions de cadena per a valors numèrics precisos
  • Prova amb valors extrems si la teva aplicació requereix alta precisió

Objectes i Arrays Blaus

El JSON vàlid inclou objectes buits {} i arrays [], que s'han de formatar correctament:

  • Els objectes buits han d'aparèixer com {}
  • Els arrays buits han d'aparèixer com []
  • Les estructures buides anidades han de mantenir la indentació adequada

Referències

  1. JSON.org - El lloc web de l'especificació oficial de JSON
  2. RFC 8259 - El format d'intercanvi de dades JSON
  3. MDN Web Docs: JSON - Documentació completa sobre JSON en JavaScript
  4. JSON Lint - Un popular validador JSON en línia
  5. jq - Un processador JSON de línia de comandament lleuger i flexible
Feedback