Sanfeliu
  1. Apunts
  2. JavaScript
  3. Lliçó 12 de 14

Introducció a JSON

Què és JSON, la seva sintaxi i per a què serveix entre client i servidor, amb exemples, JSON.stringify i JSON.parse i una activitat de comandes.

JSON (JavaScript Object Notation) és un format lleuger d’intercanvi de dades que és fàcil de llegir i escriure per a humans, i fàcil de parsejar i generar per a màquines.

S'utilitza molt en aplicacions web per enviar i rebre informació entre client i servidor, especialment en aplicacions que usen AJAX o fetch.

Sintaxi de JSON

{
  "titol": "Comprar víveres",
  "descripcio": "Comprar fruita, verdura i llet",
  "completada": false
}

Components clau:

  • {} → indiquen un objecte
  • "clau" → sempre entre cometes dobles
  • : → separa la clau del valor
  • Valors → poden ser:
    • String: "text"
    • Nombre: 42
    • Booleà: true / false
    • Array: [1, 2, 3]
    • Objecte: { "nom": "Joan" }
    • null

Exemple visual

{
  "nom": "Joan Pérez",
  "edat": 30,
  "email": "joan@example.com",
  "casat": false,
  "hobbies": ["nadar", "llegir"]
}

Ús real de JSON

És el format més habitual per:

  • Comunicació entre frontend i backend
  • APIs REST i AJAX
  • Persistència local (localStorage)
  • Fitxers de configuració (package.json, .eslintrc.json, etc.)

Exemple: Aplicació del Temps

Petició del client:

{
  "ciutat": "Barcelona",
  "data": "2025-07-29"
}

Resposta del servidor:

{
  "ciutat": "Barcelona",
  "temperatura": "29°C",
  "estat_del_temps": "Solejat",
  "humitat": "42%"
}

Metàfora: Restaurant i JSON

  • Comensal → Client
  • Cambrer → API
  • Cuina → Servidor

El cambrer escriu l'ordre en format JSON perquè el cuiner entengui exactament què preparar. És una manera clara i estructurada de comunicar-se.

Eines útils

  • json.parser.online.fr → Parsejar JSON visualment
  • jsondiff.com → Comparar dos fitxers JSON
  • JSON.stringify() → Converteix objecte JS a string JSON
  • JSON.parse() → Converteix string JSON a objecte JS

Activitat 01

Crear un petit software (amb objectes JSON) per representar comandes d’un restaurant:

const comanda = {
  taula: 5,
  cambrer: "Maria",
  plats: [
    { nom: "Amanida", preu: 8.5 },
    { nom: "Pizza 4 formatges", preu: 12 },
  ],
  total: 20.5,
  pagat: false,
};

Enviar-lo al servidor mitjançant JSON.stringify().

Aquest capítol et dóna les eines per treballar amb dades en format JSON, essencial per la comunicació entre parts d'una app moderna.