Guide Complet JSON - Format de Données

01. Qu'est-ce que JSON ?

JSON (JavaScript Object Notation) est un format de texte léger pour l'échange de données. Créé par Douglas Crockford au début des années 2000, JSON est devenu le standard de facto pour la communication entre applications web, APIs et services.

Caractéristiques principales :

Format texte facile à lire pour les humains
Simple à parser pour les machines
Indépendant du langage de programmation
Structure hiérarchique claire
Poids léger et performances optimales

{
  "nom": "JSON",
  "type": "Format de données",
  "annee": 2001,
  "populaire": true
}

02. Syntaxe et Structure

Les types de données JSON :

Type	Description	Exemple
String (Chaîne)	Texte entre guillemets doubles	`"Bonjour monde"`
Number (Nombre)	Entier ou décimal	`42`, `3.14`
Boolean (Booléen)	true ou false	`true`, `false`
Null	Valeur nulle	`null`
Object (Objet)	Collection de paires clé-valeur	`{"key": "value"}`
Array (Tableau)	Liste ordonnée de valeurs	`[1, 2, 3]`

Règles syntaxiques essentielles :

Les données sont organisées en paires clé: valeur
Les clés doivent toujours être entre guillemets doubles
Les paires sont séparées par des virgules
Les objets sont entourés d'accolades { }
Les tableaux sont entourés de crochets [ ]
Pas de virgule après le dernier élément
Pas de commentaires autorisés dans JSON standard

{
  "utilisateur": {
    "id": 1001,
    "nom": "Alice Dupont",
    "email": "alice@example.com",
    "actif": true,
    "roles": ["admin", "developer"],
    "adresse": null
  }
}

03. Les Objets JSON

Un objet JSON est une collection non ordonnée de paires clé-valeur, entourée d'accolades { }. Les objets peuvent être imbriqués à l'infini, permettant de représenter des structures de données complexes.

Structure d'un objet :

{
  "entreprise": {
    "nom": "TechCorp",
    "fondation": 2010,
    "siege": {
      "ville": "Paris",
      "pays": "France",
      "codePostal": "75001"
    },
    "employes": 250,
    "cotee": false
  }
}

Accès aux propriétés :

// JavaScript
const data = JSON.parse(jsonString);
console.log(data.entreprise.nom);           // "TechCorp"
console.log(data.entreprise.siege.ville);   // "Paris"
console.log(data.entreprise.employes);       // 250

04. Les Tableaux JSON

Les tableaux JSON sont des listes ordonnées de valeurs, entourées de crochets [ ]. Un tableau peut contenir n'importe quel type de données JSON, y compris d'autres tableaux ou objets.

{
  "produits": [
    {
      "id": 1,
      "nom": "Laptop Pro",
      "prix": 1299.99,
      "enStock": true,
      "tags": ["informatique", "portable", "professionnel"]
    },
    {
      "id": 2,
      "nom": "Souris Gaming",
      "prix": 79.99,
      "enStock": true,
      "tags": ["gaming", "peripherique"]
    },
    {
      "id": 3,
      "nom": "Écran 4K",
      "prix": 599.99,
      "enStock": false,
      "tags": ["ecran", "4K"]
    }
  ]
}

Manipulation des tableaux :

// JavaScript
const data = JSON.parse(jsonString);

// Accès par index
console.log(data.produits[0].nom);  // "Laptop Pro"

// Parcourir le tableau
data.produits.forEach(produit => {
    console.log(`${produit.nom}: ${produit.prix}€`);
});

// Filtrer les produits en stock
const enStock = data.produits.filter(p => p.enStock);

05. JSON en PHP

PHP offre des fonctions natives pour encoder et décoder JSON. Voici les principales fonctions :

Encoder en JSON (PHP → JSON) :

<?php
// Tableau associatif PHP
$data = [
    "utilisateur" => [
        "nom" => "Jean Dupont",
        "age" => 30,
        "email" => "jean@example.com",
        "actif" => true
    ],
    "scores" => [95, 87, 92, 88]
];

// Convertir en JSON
$json = json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
echo $json;
?>

Décoder du JSON (JSON → PHP) :

<?php
$jsonString = '{
    "nom": "Alice",
    "age": 25,
    "hobbies": ["lecture", "sport", "musique"]
}';

// Décoder en tableau associatif
$data = json_decode($jsonString, true);
echo $data['nom'];  // "Alice"
echo $data['age'];  // 25

// Décoder en objet
$obj = json_decode($jsonString);
echo $obj->nom;     // "Alice"
echo $obj->age;     // 25
?>

Options json_encode() :

JSON_PRETTY_PRINT : Formatage lisible avec indentation
JSON_UNESCAPED_UNICODE : Pas d'échappement des caractères Unicode
JSON_UNESCAPED_SLASHES : Pas d'échappement des slashes
JSON_NUMERIC_CHECK : Conversion automatique des nombres

"Exemple généré dynamiquement par PHP:"
{
    "serveur": "gapit.net",
    "timestamp": "2026-11-04 13:20:18",
    "php_version": "7.4.33",
    "systeme": "Linux"
}

06. JSON en JavaScript

JavaScript possède un objet natif JSON avec deux méthodes principales :

JSON.stringify() - Convertir en JSON :

// Objet JavaScript
const user = {
    nom: "Marie",
    age: 28,
    actif: true,
    roles: ["user", "moderator"],
    parametres: {
        theme: "dark",
        langue: "fr"
    }
};

// Convertir en chaîne JSON
const jsonString = JSON.stringify(user);
console.log(jsonString);

// Avec indentation
const formatted = JSON.stringify(user, null, 2);
console.log(formatted);

JSON.parse() - Convertir depuis JSON :

// Chaîne JSON
const jsonStr = '{"nom":"Pierre","age":35,"ville":"Lyon"}';

// Convertir en objet JavaScript
const obj = JSON.parse(jsonStr);
console.log(obj.nom);   // "Pierre"
console.log(obj.age);   // 35
console.log(obj.ville); // "Lyon"

// Gestion d'erreur
try {
    const data = JSON.parse(invalidJson);
} catch (error) {
    console.error("JSON invalide:", error.message);
}

07. Validation et Erreurs Courantes

Erreurs fréquentes :

Erreur	Incorrect	Correct
Guillemets simples	`{'nom': 'Jean'}`	`{"nom": "Jean"}`
Virgule finale	`{"nom": "Jean",}`	`{"nom": "Jean"}`
Clé sans guillemets	`{nom: "Jean"}`	`{"nom": "Jean"}`
Commentaires	`{"nom": "Jean" // user}`	`{"nom": "Jean"}`
Valeur undefined	`{"val": undefined}`	`{"val": null}`

Validateur en ligne :

Testez votre JSON :

08. JSON et APIs REST

JSON est le format standard pour les APIs REST modernes. Voici comment travailler avec des APIs :

Requête AJAX avec Fetch API :

// GET Request
fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => {
        console.log('Données reçues:', data);
    })
    .catch(error => {
        console.error('Erreur:', error);
    });

// POST Request avec JSON
fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        nom: 'Nouveau User',
        email: 'user@example.com'
    })
})
.then(response => response.json())
.then(data => console.log('Réponse:', data));

API REST en PHP :

<?php
// API endpoint simple
header('Content-Type: application/json');

$method = $_SERVER['REQUEST_METHOD'];

if ($method === 'GET') {
    $data = [
        'status' => 'success',
        'users' => [
            ['id' => 1, 'nom' => 'Alice'],
            ['id' => 2, 'nom' => 'Bob']
        ]
    ];
    echo json_encode($data);
}

if ($method === 'POST') {
    $input = json_decode(file_get_contents('php://input'), true);
    
    $response = [
        'status' => 'created',
        'data' => $input
    ];
    
    http_response_code(201);
    echo json_encode($response);
}
?>

Testeur d'API :

Simulateur d'API JSON :

09. JSON Schema - Validation de Structure

JSON Schema permet de définir la structure et les contraintes d'un document JSON.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "User",
  "type": "object",
  "required": ["nom", "email"],
  "properties": {
    "nom": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    }
  }
}

10. Bonnes Pratiques et Optimisation

✅ À faire :

Utiliser des noms de clés descriptifs et cohérents (camelCase ou snake_case)
Valider les données JSON avant de les traiter
Gérer les erreurs de parsing avec try-catch
Compresser les gros fichiers JSON (gzip)
Utiliser JSON Schema pour les APIs
Mettre en cache les données JSON fréquemment utilisées
Limiter la profondeur d'imbrication (max 5-7 niveaux)

❌ À éviter :

Stocker des mots de passe ou données sensibles en clair
Créer des structures JSON trop complexes et profondes
Inclure des données binaires directement (utiliser Base64)
Manipuler JSON avec des expressions régulières
Oublier la gestion d'erreur lors du parsing
Envoyer des fichiers JSON énormes sans pagination

Performance :

// Mauvais : Parser plusieurs fois
const data1 = JSON.parse(jsonString);
const data2 = JSON.parse(jsonString);

// Bon : Parser une seule fois
const data = JSON.parse(jsonString);
const data1 = data;
const data2 = data;

// Streaming pour gros fichiers
const parser = require('stream-json');
const stream = fs.createReadStream('huge.json')
    .pipe(parser());

11. Cas d'Usage Pratiques

Configuration d'application :

{
  "app": {
    "name": "MonApp",
    "version": "2.1.0",
    "database": {
      "host": "localhost",
      "port": 3306,
      "name": "mydb"
    },
    "features": {
      "cache": true,
      "debug": false
    }
  }
}

Stockage local (LocalStorage) :

// Sauvegarder
const userData = {
    preferences: { theme: 'dark', lang: 'fr' },
    lastLogin: new Date().toISOString()
};
localStorage.setItem('user', JSON.stringify(userData));

// Récupérer
const stored = localStorage.getItem('user');
const user = JSON.parse(stored);

Fichiers de données :

// package.json (Node.js)
{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.0"
  },
  "scripts": {
    "start": "node server.js"
  }
}

[ JSON GUIDE ]