Passer au contenu principal

Comprendre le format de données JSON 📦

Lorsque vous apprenez les API, vous entendez souvent le mot JSON. JSON est un format que les programmes utilisent pour échanger des données. Je vais l'expliquer très simplement !

Comparer JSON à la vie quotidienne ?​

Comparons JSON à une étiquette de colis ?

📦 Colis
┌──────────────────┐
│ Destinataire: Jean Dupont │
│ Adresse: Paris 15e  │
│ Téléphone: 01-23-45-67-89 │
│ Article: Livre      │
└──────────────────┘

Si nous écrivons ces informations en JSON :

{
  "destinataire": "Jean Dupont",
  "adresse": "Paris 15e",
  "telephone": "01-23-45-67-89",
  "article": "Livre"
}

Le nom officiel de JSON​

JSON = JavaScript Object Notation

Cela signifie « notation d'objet JavaScript », mais il peut être utilisé dans tous les langages de programmation !

Règles de base de JSON​

1. Entourer avec des accolades ​

{
  "nom": "valeur"
}

2. Utiliser des guillemets doubles " "​

{
  "nom": "Jean Dupont"
}

3. Connecter le nom et la valeur avec deux points :​

{
  "age": 25
}

4. Séparer plusieurs informations avec des virgules ,​

{
  "nom": "Jean Dupont",
  "age": 25,
  "profession": "développeur"
}

Types de données JSON​

Valeurs utilisables dans JSON :

1. Chaîne de caractères (String) ""​

{
  "nom": "Jean Dupont",
  "ville": "Paris"
}

2. Nombre (Number)​

{
  "age": 25,
  "taille": 175.5,
  "temperature": -5
}

3. Booléen (Boolean)​

{
  "inscriptionComplete": true,
  "emailVerifie": false
}

4. Tableau (Array) [ ]​

Pour contenir plusieurs éléments :

{
  "loisirs": ["lecture", "cinéma", "codage"],
  "notes": [90, 85, 95]
}

5. Objet (Object) ​

Pour regrouper des informations :

{
  "utilisateur": {
    "nom": "Jean Dupont",
    "age": 25
  }
}

6. null​

Quand il n'y a pas de valeur :

{
  "deuxiemePrenom": null
}

Comprendre avec des exemples réels​

Exemple 1 : Informations utilisateur 👤​

{
  "nom": "Jean Dupont",
  "age": 25,
  "email": "jean@example.com",
  "membre": true,
  "adresse": {
    "ville": "Paris",
    "arrondissement": "15e"
  },
  "loisirs": ["lecture", "cinéma", "codage"]
}

Exemple 2 : Produit e-commerce 🛍️​

{
  "produit": "Ordinateur portable",
  "prix": 1500,
  "stock": 5,
  "enPromotion": true,
  "couleurs": ["argent", "gris", "noir"],
  "specifications": {
    "CPU": "i7",
    "RAM": "16GB",
    "stockage": "512GB SSD"
  }
}

Exemple 3 : Informations météo ☀️​

{
  "ville": "Paris",
  "temperature": 23,
  "meteo": "ensoleillé",
  "humidite": 60,
  "probabilitePluie": 0,
  "previsionsSemaine": [
    {"jour": "Lun", "temperature": 22},
    {"jour": "Mar", "temperature": 24},
    {"jour": "Mer", "temperature": 25}
  ]
}

Comprendre les tableaux JSON​

Pour stocker plusieurs données, utilisez les crochets [ ] :

Tableau simple​

["pomme", "banane", "orange"]

Tableau d'objets​

[
  {
    "nom": "Jean Dupont",
    "age": 25
  },
  {
    "nom": "Pierre Martin",
    "age": 30
  },
  {
    "nom": "Marie Durand",
    "age": 28
  }
]

Comment lire JSON​

{
  "etudiant": {
    "nom": "Jean Dupont",
    "notes": [90, 85, 95],
    "reussi": true
  }
}

Lisez-le comme ceci :

  • « Il y a des informations sur un étudiant »
  • « Son nom est Jean Dupont »
  • « Les notes sont 90, 85, 95 »
  • « Réussi est vrai (true) »

JSON vs autres formats​

JSON vs CSV​

CSV (format tableau comme Excel) :

nom,age,ville
Jean Dupont,25,Paris
Pierre Martin,30,Lyon

JSON :

[
  {"nom": "Jean Dupont", "age": 25, "ville": "Paris"},
  {"nom": "Pierre Martin", "age": 30, "ville": "Lyon"}
]

Avantages de JSON :

  • Peut exprimer des structures complexes
  • Représente facilement des données imbriquées
  • Utilisé comme standard dans les API

Exemples d'utilisation pratique​

Exemple de réponse API​

Lorsque vous demandez des informations utilisateur à l'API GitHub :

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  "location": "San Francisco",
  "public_repos": 344,
  "followers": 1000000,
  "following": 0
}

Exemple de fichier de configuration​

Configuration de programme en JSON :

{
  "nomApplication": "Mon site web",
  "version": "1.0.0",
  "baseDeDonnees": {
    "hote": "localhost",
    "port": 3306,
    "utilisateur": "admin"
  },
  "fonctionnalites": {
    "modeNuit": true,
    "notifications": true,
    "sauvegardeAuto": false
  }
}

Utiliser les outils JSON​

Essayez JSON avec les outils de notre site !

1. Formater JSON joliment​

JSON Formatter - Rendre le JSON complexe lisible !

2. Explorer les données JSON​

JSON Path Tester - Trouver les données souhaitées dans JSON

3. Convertir JSON vers d'autres formats​

Erreurs courantes et solutions​

❌ Erreur 1 : Oublier la virgule​

{
  "nom": "Jean Dupont"
  "age": 25
}

✅ Méthode correcte :​

{
  "nom": "Jean Dupont",
  "age": 25
}

❌ Erreur 2 : Ajouter une virgule à la fin​

{
  "nom": "Jean Dupont",
  "age": 25,
}

✅ Méthode correcte :​

{
  "nom": "Jean Dupont",
  "age": 25
}

❌ Erreur 3 : Utiliser des guillemets simples​

{
  'nom': 'Jean Dupont'
}

✅ Méthode correcte :​

{
  "nom": "Jean Dupont"
}

❌ Erreur 4 : Écrire des commentaires​

{
  // Ceci est un commentaire
  "nom": "Jean Dupont"
}

Vous ne pouvez pas écrire de commentaires dans JSON ! ❌

Où JSON est utilisé​

1. Communication API 🌐​

La plupart des API Web échangent des données en JSON.

// Requête API
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

2. Fichiers de configuration ⚙️​

  • package.json (Node.js)
  • tsconfig.json (TypeScript)
  • settings.json (VS Code)

3. Stockage de données 💾​

Les bases de données NoSQL (MongoDB, etc.) stockent les données au format JSON.

4. Échange de données 📤📥​

Lorsque le serveur et le client échangent des données.

Questions fréquemment posées (FAQ)​

Q1 : JSON est-il un langage de programmation ?​

R : Non ! JSON est un format de données. C'est simplement une façon de représenter des données.

Q2 : JSON n'est-il utilisé qu'avec JavaScript ?​

R : Non ! Il peut être utilisé dans presque tous les langages de programmation.

  • Python
  • Java
  • C++
  • PHP
  • Ruby Et bien d'autres !

Q3 : Quelle est la différence entre JSON et XML ?​

R : XML était un format très utilisé auparavant. JSON est plus simple et plus facile à lire, donc JSON est plus utilisé de nos jours.

XML :

<user>
  <name>Jean Dupont</name>
  <age>25</age>
</user>

JSON :

{
  "name": "Jean Dupont",
  "age": 25
}

Q4 : Quelle est l'extension de fichier JSON ?​

R : C'est .json.

data.json
config.json
users.json

Validation JSON​

Pour vérifier si JSON est au bon format :

  1. Utiliser JSON Formatter
  2. Utiliser des outils de validation JSON en ligne
  3. Vérifier dans les outils de développement du navigateur

Pratique : Créer votre propre JSON​

Créez vos informations en JSON :

{
  "nom": "Votre nom",
  "age": votre_age,
  "residence": "Votre ville",
  "loisirs": [
    "loisir1",
    "loisir2",
    "loisir3"
  ],
  "etudiant": true,
  "presentation": {
    "platPrefere": "...",
    "couleurPreferee": "..."
  }
}
Astuce

Collez-le dans JSON Formatter et appuyez sur le bouton « Format » ! Il sera joliment organisé et vous pourrez également vérifier les erreurs de syntaxe.

Prochaines étapes 🚀​

Si vous avez compris JSON :

  1. ✅ JSON Formatter - Formater JSON
  2. ✅ JSON Path Tester - Rechercher des données JSON
  3. ✅ API Tester - Tester les API utilisant JSON
  4. ✅ JSON to TypeScript - Convertir JSON en code

Conclusion​

JSON n'est pas difficile ! C'est une façon d'organiser les données.

Points à retenir :

  • { } Commence et se termine par des accolades
  • " " Utiliser des guillemets doubles
  • : Connecter le nom et la valeur avec deux points
  • , Séparer les éléments avec des virgules
  • Pas de virgule après le dernier élément

Pouvez-vous maintenant lire et écrire du JSON ? 🎉

Si vous voulez apprendre les API et faire du développement web, JSON est essentiel. Vous vous y habituerez rapidement en le voyant souvent !