Chapitre 17 – JSON (JavaScript Object Notation)

Le format JSON (JavaScript Object Notation) est un format de données léger, lisible et largement utilisé pour l'échange d'informations entre les applications web, notamment entre le client et les serveurs (API).

1. Structure et syntaxe JSON

JSON est basé sur la syntaxe des objets JavaScript, mais avec des règles strictes :

• Les clés doivent toujours être des chaînes entourées de guillemets doubles ("clé").
• Les valeurs peuvent être :
  • string des chaînes ("texte")
  • number des nombres (42)
  • boolean des booléens (true, false)
  • null la valeur null
  • des tableaux
  • des objets imbriqués

{
  "nom": "Alice",
  "age": 28,
  "connecté": true,
  "amis": ["Bob", "Claire"],
  "adresse": {
    "ville": "Paris",
    "codePostal": 75000
  }
}

2. Conversion JSON.stringify() / JSON.parse()

JSON.stringify()

Cette méthode permet de convertir un objet JavaScript en chaîne JSON :

const utilisateur = {
  nom: "Alice",
  connecté: true
};

const jsonString = JSON.stringify(utilisateur);
console.log(jsonString);
// Résultat : '{"nom":"Alice","connecté":true}'

Paramètres optionnels :

• replacer : fonction ou tableau pour filtrer les propriétés
• espace : nombre d'espaces ou chaîne pour l'indentation

// Avec indentation
JSON.stringify(utilisateur, null, 2);

// Filtrage des propriétés
JSON.stringify(utilisateur, ['nom'], 2);

JSON.parse()

Cette méthode permet de convertir une chaîne JSON valide en objet JavaScript :

const json = '{"nom":"Alice","connecté":true}';
const obj = JSON.parse(json);

console.log(obj.nom); // Alice
console.log(obj.connecté); // true

Toujours utiliser try...catch avec JSON.parse() car une chaîne JSON invalide générera une erreur.

try {
  const data = JSON.parse(jsonString);
  // Traiter les données
} catch (e) {
  console.error("Erreur de parsing JSON:", e);
}

3. Utilisation dans les échanges avec les API

Le JSON est le format par défaut pour échanger des données avec des serveurs via fetch ou d'autres moyens de communication HTTP.

Exemple : Récupérer des données JSON depuis une API

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json())
  .then(data => {
    console.log("Nom :", data.name);
    console.log("Email :", data.email);
  });

Exemple : Envoyer des données JSON à une API

const nouveauPost = {
  title: "Bonjour",
  body: "Ceci est un post",
  userId: 1
};

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(nouveauPost)
})
.then(response => response.json())
.then(data => {
  console.log("Réponse du serveur :", data);
});

Il est essentiel de convertir les objets en JSON avec JSON.stringify() avant de les envoyer, et de parser la réponse avec JSON.parse() (souvent fait automatiquement via response.json()).