FlowingDev

JSON, expliqué : Le format de données qui fait tourner le web en silence

Apprenez ce qu'est le JSON (JavaScript Object Notation), pourquoi c'est le format d'échange de données dominant, et comment fonctionne sa structure simple à base de texte.

Essayer l'outil: Éditeur JSON

En une phrase

Le JSON est un format léger, basé sur du texte, pour structurer et échanger des données, qui est facile à lire pour les humains et à parser pour les machines.

Le problème qu'il résout

À la bonne vieille époque du web (fin des années 90 et début 2000), si vous vouliez que votre site web récupère de nouvelles données sans recharger toute la page, vous utilisiez probablement une technologie nommée AJAX (Asynchronous JavaScript and XML). Et comme son nom l'indique, le format de données de prédilection était le XML.

Le XML est puissant, mais il est aussi... verbeux. Il est lourd. Il est rempli de balises ouvrantes, de balises fermantes, d'attributs et d'espaces de noms. Le parser en JavaScript, le langage du navigateur, était une corvée. Il fallait naviguer dans une arborescence de document pataude, et ça ne semblait tout simplement pas natif.

<!-- Voici un seul utilisateur. Imaginez une liste de milliers. Aïe. -->
<user id="123">
  <username>coder_dave</username>
  <isActive>true</isActive>
  <roles>
    <role>admin</role>
    <role>editor</role>
  </roles>
</user>

Vers 2001, un développeur du nom de Douglas Crockford, qui travaillait sur un projet, avait besoin d'un moyen plus simple pour transmettre des données au navigateur. Il a eu une idée de génie : JavaScript possédait déjà un moyen parfaitement fonctionnel pour représenter des structures de données — sa propre syntaxe d'objets littéraux. Et s'il était possible d'envoyer des données sous forme d'une chaîne de caractères qui ressemble à un objet JavaScript ?

Ce fut la naissance du JSON (JavaScript Object Notation). Un serveur pouvait envoyer ce texte :

{
  "id": 123,
  "username": "coder_dave",
  "isActive": true,
  "roles": ["admin", "editor"]
}

...et le navigateur pouvait, avec un minimum d'effort, le transformer en un objet JavaScript natif avec lequel il pouvait travailler instantanément. C'était léger, propre, et parfaitement adapté au langage natif du web. Cette simplicité a provoqué une explosion cambrienne des API web, alimentant l'essor des applications web dynamiques (single-page applications), des backends mobiles, et en gros de tout l'internet moderne tel que nous le connaissons. Le JSON n'a pas seulement résolu un problème technique ; il a huilé les rouages pour toute une nouvelle génération de logiciels.

Comment ça marche sous le capot

À la base, le JSON n'est qu'un ensemble de règles pour écrire des données sous forme de texte. Ces règles sont simples, et c'est précisément ce qui fait son succès.

Les briques de base : Clés et Valeurs

Tout l'univers du JSON est construit sur une structure simple : la paire clé-valeur.

"clé": valeur

  • La clé est toujours une chaîne de caractères (string), entourée de guillemets doubles. Ce n'est pas négociable.
  • La valeur peut être l'un des quelques types de données spécifiques.

Cette paire décrit une information unique, comme "nom": "Luke Skywalker" ou "age": 19.

Les types de données

Le JSON est strict sur ses types de valeurs. On ne peut pas y mettre n'importe quoi. Vous avez droit à six types de base, plus null.

Type Exemple Description
String "La Force est puissante en lui." N'importe quel texte. Doit être entre guillemets doubles.
Number 1138 ou 3.14 Nombres entiers ou à virgule flottante. Pas de distinction.
Boolean true ou false Toujours en minuscules. Représente un état binaire.
Array ["Tatooine", "Dagobah", "Bespin"] Une liste ordonnée de valeurs, entre [].
Object { "arme": "sabre laser", "couleur": "vert" } Une collection non ordonnée de paires clé-valeur, entre {}.
Null null Représente l'absence intentionnelle d'une valeur.

Et c'est tout. Remarquez ce qui manque : les fonctions, les dates (elles sont envoyées comme des strings), undefined, et, le plus célèbre, les commentaires. Ce minimalisme est une fonctionnalité, pas un bug ; il garantit que le format reste non ambigu et facile à parser pour n'importe quel langage de programmation.

Structurer les données : Objets et Tableaux

La vraie puissance vient de l'imbrication de ces types. La valeur dans une paire clé-valeur peut être un autre objet ou un tableau. Cela permet de construire des structures de données arbitrairement complexes.

Les objets ({...}) sont utilisés pour regrouper des données liées à une seule "chose". Pensez-y comme une entrée de dictionnaire ou un profil.

Les tableaux ([...]) sont utilisés pour des listes ordonnées d'éléments. Les éléments d'un tableau peuvent être de n'importe quel type, même mélangés (bien qu'il soit généralement de bonne pratique de les garder uniformes).

Jetons un œil à un exemple plus complet :

{
  "squadName": "Star Wars Heroes",
  "formed": 1977,
  "active": true,
  "members": [
    {
      "name": "Luke Skywalker",
      "age": 19,
      "secretIdentity": null,
      "powers": [
        "Jedi mind tricks",
        "Piloting",
        "The Force"
      ]
    },
    {
      "name": "Han Solo",
      "age": 29,
      "secretIdentity": null,
      "powers": [
        "Blaster accuracy",
        "Sarcasm",
        "Kessel Run under 12 parsecs"
      ]
    }
  ]
}

Vous voyez ? Nous avons un objet externe qui décrit l'escouade. Une de ses propriétés, "members", est un tableau. Chaque élément de ce tableau est un autre objet, représentant un héros. Et chaque objet de héros a ses propres propriétés, dont l'une ("powers") est un autre tableau de chaînes de caractères. C'est comme ça qu'on construit une arborescence de données avec JSON.

Du Texte à l'Objet : Le Parsing

Le tour de magie, c'est de transformer ce texte en quelque chose qu'un programme peut utiliser.

  1. Sérialisation : Une application côté serveur (écrite en Python, Java, Go, etc.) a des données en mémoire. Elle utilise une bibliothèque JSON pour sérialiser ces données en une chaîne de caractères au format JSON. En JavaScript, c'est JSON.stringify().
  2. Transmission : Cette chaîne est envoyée sur le réseau, typiquement dans le corps d'une réponse HTTP.
  3. Parsing : Le client (comme un navigateur web) reçoit cette chaîne. Il utilise un parser JSON intégré pour retransformer la chaîne en une structure de données native qu'il peut manipuler. En JavaScript, c'est JSON.parse().

Ce processus en deux étapes, sérialisation-parsing, est le battement de cœur de la communication web moderne.

Histoires vécues

L'app mobile buggée

Une startup a lancé une application mobile de commande pour une chaîne de restaurants locale. Un matin, l'application s'est mise à crasher pour tous les utilisateurs dès l'ouverture. L'équipe de dev était en panique totale. Les logs du serveur montraient que l'API renvoyait un statut 200 OK, et les données semblaient correctes en y jetant un œil rapide. Après des heures de débogage frénétique, ils ont finalement inspecté le texte brut de la réponse de l'API. Un développeur backend, voulant bien faire, avait ajouté une note pour ses collègues directement dans le code qui générait le JSON : // TODO: Confirm weekend hours. Ce commentaire était inclus dans la chaîne JSON finale. Bien qu'inoffensif dans du code, un commentaire rend le JSON invalide. Le parser JSON strict de l'application a vu le // inattendu et a immédiatement échoué, faisant crasher l'app avant même de pouvoir afficher un message d'erreur.

Leçon : Les parsers JSON ne pardonnent pas. Le format est défini de manière stricte pour une bonne raison : garantir l'interopérabilité. Un seul caractère invalide — un commentaire, une virgule en trop, un guillemet simple — et un parser valide rejettera l'ensemble des données.

Le fiasco des prix à l'international

Une entreprise d'e-commerce américaine s'étendait en Allemagne. Leur API envoyait les informations produit en JSON, y compris un champ price. Pour un article à 19,95 $, le JSON était "price": 19.95. En préparation du lancement allemand, un développeur a mis à jour le backend pour formater le prix selon les conventions allemandes, où la virgule est le séparateur décimal. L'API a commencé à envoyer "price": "19,95". Cependant, le code frontend s'attendait toujours à un nombre. En JavaScript, parseFloat("19,95") est évalué à 19, ignorant tout ce qui suit la virgule. Soudain, tous les produits en Allemagne étaient affichés avec une réduction énorme et incorrecte.

Leçon : Le JSON sert à transporter des données brutes, pas à les mettre en forme. Le type de données est crucial. Un prix est un nombre, donc envoyez-le comme un nombre (19.95). Laissez l'application côté client (le navigateur ou l'app mobile) se charger de formater ce nombre en $19.95, 19,95 € ou ¥19 en fonction de la locale de l'utilisateur. Ne mélangez pas les données et la logique d'affichage.

Le fichier de configuration qui ne pouvait pas être expliqué

Une petite équipe mettait en place un nouveau service en utilisant un fichier config.json pour stocker les chaînes de connexion à la base de données, les clés d'API et les feature flags. À mesure que la configuration devenait plus complexe, ils avaient désespérément besoin d'ajouter des commentaires pour expliquer à quoi servait chaque paramètre cryptique et pourquoi il avait une valeur particulière. Mais le JSON interdit les commentaires. Leur "solution" a été de créer un fichier config_documentation.md qui devait être synchronisé avec config.json. C'est vite devenu un énorme casse-tête. Finalement, ils ont compris leur erreur.

Leçon : Utilisez le bon outil pour le bon travail. Le JSON est le champion incontesté de l'échange (interchange) de données entre machines (comme une réponse d'API). Mais pour les fichiers de configuration maintenus par des humains, où les commentaires et la lisibilité sont essentiels, d'autres formats comme le YAML ou même un simple fichier .js sont souvent un bien meilleur choix.

Erreurs et pièges courants

  • Virgules en fin de liste : Ajouter une virgule après le dernier élément d'un objet ou d'un tableau ("key": "value",}) rendra votre JSON invalide. C'est une erreur fréquente pour les développeurs habitués à des syntaxes plus permissives en JavaScript.
  • Commentaires : Vous n'y avez pas droit. // et /* ... */ ne font pas partie de la spécification et casseront le parsing. Si vous avez besoin d'ajouter des métadonnées, vous devez le faire à l'intérieur de la structure de données elle-même, par ex., { "_comment": "Ceci est ma note", "realData": "..." }.
  • Guillemets simples : Toutes les clés et toutes les valeurs de type chaîne de caractères doivent utiliser des guillemets doubles ("). L'utilisation de guillemets simples (') est invalide en JSON, même si c'est courant en JavaScript.
  • Clés non définies (undefined) : Envoyer {"key": undefined} n'est pas possible. La paire clé-valeur sera généralement omise lors de la sérialisation. Pour représenter une valeur manquante, utilisez null.
  • Utiliser des nombres comme des chaînes de caractères : Bien que vous puissiez envoyer un nombre sous forme de chaîne (par ex., "id": "123"), c'est une mauvaise pratique. Cela oblige l'application réceptrice à faire un travail supplémentaire pour le reconvertir en nombre et peut entraîner des bugs subtils (par ex., la comparaison de chaînes fait que "10" > "9" est false).

Pourquoi ça vous concerne

Si vous touchez au code de près ou de loin, vous tomberez sur du JSON. La question n'est pas de savoir si vous allez en voir, mais quand et à quelle fréquence.

  • Développeurs Web : Vous consommerez du JSON provenant d'API et en enverrez depuis vos formulaires. L'état entier de votre application est probablement géré comme un objet de type JSON.
  • Développeurs Backend : Vous créerez des API qui produisent du JSON et consommerez du JSON provenant d'autres services.
  • Développeurs Mobiles : Vous communiquerez avec votre backend exclusivement via des API qui parlent en JSON.
  • DevOps/SRE : Les outils d'Infrastructure-as-Code, les pipelines CI/CD, et les API des fournisseurs cloud sont tous configurés et gérés avec du JSON ou des formats similaires.
  • Data Scientists : Vous extrairez des données d'API web, et elles arriveront presque toujours sous forme de JSON.
  • Curieux non-développeurs : Comprendre la simple structure clé-valeur du JSON peut démystifier la façon dont les applications sur votre téléphone obtiennent leurs données et comment les sites web chargent du contenu dynamiquement. C'est un coup d'œil sous le capot du monde numérique.

Le JSON est la lingua franca des données sur internet. Connaître ses règles et son objectif est une compétence fondamentale pour quiconque crée ou travaille avec des logiciels modernes.

Pour aller plus loin

  • JSON.org : Le site original, une seule page de spec par Douglas Crockford. Une masterclass de simplicité.
  • RFC 8259 : Le "standard" officiel de l'IETF qui formalise le format JSON pour internet.
  • MDN : Travailler avec du JSON : Le guide de référence pour les développeurs JavaScript, expliquant JSON.parse() et JSON.stringify().
  • Wikipédia : JSON : Fournit un excellent aperçu de l'histoire, des dérivés (comme le GeoJSON), et des comparaisons avec d'autres formats.

Théorie bouclée. Place à la pratique — 100 % dans ton navigateur.

Essayer l'outil: Éditeur JSON