Objets et JSON

Pourquoi les objets ?#

Imagine que tu codes un jeu vidéo. Tu veux représenter un héros. Avec ce que tu connais déjà, tu pourrais faire :

let pseudo = "Lex";
let niveau = 12;
let hp = 85;
let vivant = true;

Quatre variables pour un seul personnage. Maintenant ajoute trois ennemis dans la pièce, et tu te retrouves avec pseudoEnnemi1, niveauEnnemi1, hpEnnemi1, pseudoEnnemi2... cauchemar 😵.

Un objet te permet de regrouper toutes ces informations dans une seule structure cohérente. Une variable, plein de propriétés.

Créer un objet#

Un objet, c'est un sac à variables. On le crée avec des accolades {}, et chaque variable à l'intérieur s'appelle une propriété.

const heros = {
  pseudo: "Lex",
  niveau: 12,
  hp: 85,
  vivant: true
};

Chaque propriété est une paire clé : valeur, séparées par une virgule. Les valeurs peuvent être de n'importe quel type : nombre, chaîne, booléen, tableau, et même un autre objet.

Accéder aux propriétés#

Deux notations possibles : la notation point et la notation crochets.

console.log(heros.pseudo);    // "Lex"
console.log(heros["niveau"]); // 12

Quelle utiliser ? La notation point est plus lisible, c'est donc la valeur par défaut. Les crochets servent quand le nom de la propriété est dans une variable :

const champ = "hp";
console.log(heros[champ]); // 85 — équivaut à heros.hp

💡 Les crochets sont aussi obligatoires si la clé contient un espace ou un caractère bizarre — mais en pratique on évite ces cas.

Modifier les propriétés#

Même syntaxe, mais avec un = :

heros.hp = 50;       // Le héros a pris des dégâts
heros.niveau = 13;   // Level up!

Tu peux aussi ajouter une propriété qui n'existait pas :

heros.classe = "Mage";
console.log(heros.classe); // "Mage"

Ou la supprimer avec delete :

delete heros.classe;

⚠️ Note : même si on a déclaré heros avec const, on peut modifier ses propriétés. const empêche de réassigner la variable elle-même (heros = autreChose), mais pas de modifier le contenu de l'objet.

Méthodes et this#

Une méthode est juste une fonction stockée dans un objet. Exemple avec un ennemi qui a un comportement :

const gobelin = {
  nom: "Gobelin sournois",
  hp: 30,
  attaque: 5,
  rugir: function() {
    return this.nom + " grogne 😤";
  }
};

console.log(gobelin.rugir()); // "Gobelin sournois grogne 😤"

Le mot-clé this désigne l'objet propriétaire de la méthode. Ici, à l'intérieur de rugir, this représente gobelin. Donc this.nom équivaut à gobelin.nom.

💡 Pourquoi ne pas écrire gobelin.nom directement ? Parce qu'avec this, la méthode reste valide même si tu copies l'objet ou si tu en crées d'autres similaires. C'est plus robuste et plus réutilisable.

Syntaxe raccourcie pour les méthodes#

JavaScript propose un raccourci très pratique pour écrire les méthodes :

const gobelin = {
  nom: "Gobelin sournois",
  hp: 30,
  rugir() {  // au lieu de "rugir: function()"
    return this.nom + " grogne 😤";
  },
  prendreDegats(montant) {
    this.hp = this.hp - montant;
    return `${this.nom} a maintenant ${this.hp} HP`;
  }
};

console.log(gobelin.prendreDegats(10)); // "Gobelin sournois a maintenant 20 HP"

C'est cette syntaxe qu'on préfère aujourd'hui : plus lisible, moins de bruit visuel.

Objets imbriqués et tableaux#

Une propriété peut contenir un autre objet ou un tableau d'objets. C'est là que ça devient puissant — tu peux modéliser des structures aussi complexes que tu veux.

const carte = {
  nom: "Forêt Maudite",
  taille: { largeur: 100, hauteur: 100 },
  spawn: { x: 5, y: 5 },
  ennemis: [
    { type: "gobelin", x: 10, y: 12, hp: 30 },
    { type: "loup",    x: 25, y: 30, hp: 45 },
    { type: "sorcier", x: 60, y: 80, hp: 70 }
  ]
};

Pour accéder aux infos imbriquées, on enchaîne les accès :

carte.taille.largeur;       // 100
carte.spawn.x;              // 5
carte.ennemis.length;       // 3
carte.ennemis[0].type;      // "gobelin"
carte.ennemis[2].hp;        // 70

Tu peux aussi boucler sur les ennemis comme tu le ferais sur n'importe quel tableau :

for (const ennemi of carte.ennemis) {
  console.log(`Un ${ennemi.type} en (${ennemi.x}, ${ennemi.y})`);
}

⚠️ Piège classique : si tu accèdes à une propriété qui n'existe pas, tu obtiens undefined. Et si tu essaies d'aller plus profond, ça plante :

carte.boss;             // undefined (pas d'erreur)
carte.boss.nom;         // ❌ ERREUR : Cannot read properties of undefined

Pense toujours à vérifier qu'une propriété existe avant d'aller dedans.

Petit tour des objets natifs JS#

JavaScript te fournit déjà toute une collection d'objets prêts à l'emploi. En voici trois utiles pour vos jeux.

Math — pour les calculs#

Math.random();           // Nombre aléatoire entre 0 (inclus) et 1 (exclus)
Math.floor(3.7);         // 3 (arrondi inférieur)
Math.max(10, 20, 5);     // 20
Math.PI;                 // 3.14159...

Recette utile : un nombre entier aléatoire entre 0 et 9 :

Math.floor(Math.random() * 10);

Date — pour les dates#

const maintenant = new Date();
console.log(maintenant);                // date actuelle
console.log(maintenant.getFullYear());  // 2026

Array — tu connais déjà#

Les tableaux sont des objets en JavaScript. Les méthodes que tu utilises (push, length, map, filter...) sont en fait des méthodes de l'objet Array.

💡 Le navigateur expose plein d'autres objets puissants (window, document, localStorage...) qu'on découvrira dans un prochain chapitre.

JSON : du texte qui ressemble à un objet#

JSON signifie JavaScript Object Notation. C'est un format texte qui permet de représenter des données structurées.

À quoi ça ressemble ?#

{
  "pseudo": "Lex",
  "niveau": 12,
  "hp": 85,
  "vivant": true
}

Ça a l'air d'un objet JavaScript, mais attention aux différences importantes :

Objet JS	JSON
Clés sans guillemets : pseudo:	Clés toujours entre guillemets doubles : "pseudo":
Guillemets simples ou doubles autorisés	Guillemets doubles uniquement
Peut contenir des fonctions	Pas de fonctions
Commentaires possibles	Pas de commentaires

À quoi ça sert ?#

JSON est le format universel pour échanger des données. Quand ton appli web parle à un serveur, à une API, à un fichier de config — c'est presque toujours du JSON qui transite.

Convertir entre objet et JSON#

JavaScript te donne deux outils intégrés :

JSON.stringify(objet) transforme un objet en texte JSON :

const heros = { pseudo: "Lex", niveau: 12 };
const texte = JSON.stringify(heros);
console.log(texte); // '{"pseudo":"Lex","niveau":12}'

JSON.parse(texte) fait l'inverse :

const texte = '{"pseudo":"Lex","niveau":12}';
const objet = JSON.parse(texte);
console.log(objet.pseudo); // "Lex"

JSON peut contenir tout ce que tu veux#

Tableaux, sous-objets, mélanges — tout est permis :

{
  "pseudo": "Lex",
  "stats": { "hp": 85, "mana": 120 },
  "inventaire": [
    { "nom": "Potion", "quantite": 3 },
    { "nom": "Épée",   "quantite": 1 }
  ],
  "actif": true
}

C'est exactement la même structure que les objets imbriqués qu'on a vus plus haut, juste écrite en texte.

Importer un JSON dans Vite#

Dans un projet Vite, on charge rarement le JSON via fetch. Il existe une syntaxe beaucoup plus simple : l'import.

Crée un fichier data/joueurs.json à côté de ton script :

[
  { "id": 1, "pseudo": "Lex", "niveau": 12 },
  { "id": 2, "pseudo": "Nyx", "niveau": 24 }
]

Puis dans ton main.js :

import joueurs from './data/joueurs.json';

console.log(joueurs);            // tableau d'objets
console.log(joueurs[0].pseudo);  // "Lex"

✅ Vite parse automatiquement le JSON pour toi. Tu manipules un objet JavaScript directement, sans aucune conversion.

⚠️ Cette syntaxe ne fonctionne pas en JavaScript pur dans le navigateur (sans bundler). Elle est spécifique aux outils comme Vite, Webpack, Parcel.

Exercices de lecture#

Exercice 1#

Considère cet objet :

const personnage = {
  pseudo: "Mira",
  niveau: 18,
  stats: { hp: 150, mana: 80, force: 40 },
  inventaire: ["potion", "torche", "carte"]
};

1. Comment accéder au pseudo ?
2. Comment accéder à la valeur de mana ?
3. Comment accéder au premier objet de l'inventaire ?
4. Comment afficher combien d'objets sont dans l'inventaire ?

Exercice 2#

Considère cette chaîne JSON :

const texte = '{"pseudo":"Mira","niveau":18,"hp":150}';

1. Comment la convertir en objet JavaScript ?
2. Une fois convertie, comment accéder au niveau ?

Exercice 3#

Considère cet objet :

const epee = {
  nom: "Lame du crépuscule",
  degats: 25,
  decrire() {
    return `${this.nom} inflige ${this.degats} dégâts`;
  }
};

1. Comment appeler la méthode decrire ?
2. Que retourne-t-elle ?

Exercice 4#

Considère cet objet :

const equipe = {
  nom: "Les Corbeaux",
  membres: [
    { pseudo: "Lex",  rang: "Capitaine" },
    { pseudo: "Nyx",  rang: "Mage"      },
    { pseudo: "Tank", rang: "Tank"      }
  ]
};

1. Comment accéder au pseudo du second membre ?
2. Comment accéder au rang du dernier membre sans connaître la longueur d'avance ?

Exercices pratiques#

📚 Exercice 1 — Bibliothèque chaotique#

Objectif : manipuler un tableau d'objets, gérer un formulaire, afficher dynamiquement.

Énoncé

Tu vas créer une mini-app de bibliothèque avec des livres complètement inventés. Règles obligatoires :

• Titres drôles et fictifs (ex. "Comment perdre à StarCraft en 4 leçons", "Le grimoire du goûter")
• Auteurs fictifs (ex. Bartholomé Croquette, Jeanne-Élise du Tartiflette)
• Couvertures = images dans le dossier public/covers/. Récupère-les sur Unsplash, génère-les en IA, ou dessine-les toi-même

Étapes :

1. Crée un tableau livres qui contient au moins 5 livres au démarrage. Chaque livre est un objet avec : titre, auteur, annee, couverture (chemin vers l'image dans public/).
2. Crée un formulaire HTML avec les champs nécessaires + un bouton "Ajouter".
3. Au clic, ajoute le nouveau livre au tableau et réaffiche la liste.
4. Affiche les livres en grille de cards : image de couverture, titre, auteur, année.
5. Ajoute un bouton "Supprimer" sur chaque card.

Bonus 💡 : sauvegarde la liste dans le navigateur pour qu'elle persiste après un refresh.

• Pistes : localStorage.setItem, JSON.stringify, JSON.parse
• MDN — localStorage

🎮 Exercice 2 — Roster de joueurs#

Objectif : importer un JSON dans Vite, afficher des données imbriquées, manipuler des sous-tableaux.

Énoncé

Tu reçois un fichier players.json incomplet avec seulement 2 joueurs :

[
  {
    "id": 1,
    "pseudo": "NyxBlade",
    "niveau": 24,
    "classe": "Mage",
    "avatar": "/avatars/nyx.png",
    "stats": { "hp": 180, "mana": 220, "force": 45 },
    "inventaire": [
      { "nom": "Bâton de glace", "type": "arme",        "rarete": "rare" },
      { "nom": "Potion de vie",  "type": "consommable", "quantite": 3    }
    ],
    "guilde": { "nom": "Les Corbeaux d'Argent", "rang": "Lieutenant" }
  },
  {
    "id": 2,
    "pseudo": "TankFromage",
    "niveau": 18,
    "classe": "Guerrier",
    "avatar": "/avatars/tank.png",
    "stats": { "hp": 300, "mana": 40, "force": 80 },
    "inventaire": [
      { "nom": "Marteau du brunch", "type": "arme", "rarete": "épique" }
    ],
    "guilde": { "nom": "Les Corbeaux d'Argent", "rang": "Membre" }
  }
]

Étapes :

1. Complète le fichier pour atteindre 8 joueurs minimum, en respectant le schéma. Sois créatif sur les pseudos, les classes, les noms d'objets et de guildes.
2. Importe ce JSON dans ton script Vite avec import joueurs from './data/players.json'.
3. Affiche chaque joueur en card : avatar, pseudo, classe, niveau, ses 3 stats (HP / Mana / Force), la liste des objets de son inventaire (avec leur rareté quand elle existe), et sa guilde avec son rang.
4. Ajoute un bouton "Trier par niveau" (du plus haut au plus bas).

Bonus 1 💡 : ajoute un <select> pour filtrer l'affichage par classe.

• Pistes : Array.filter, événement change sur le select
• MDN — Array.filter

Bonus 2 💡 : affiche une section "Armurerie" qui rassemble UNIQUEMENT les armes de tous les joueurs réunis dans une seule liste.

🎨 Exercice 3 — Petit dessinateur SVG#

Objectif : manipuler un tableau d'objets hétérogènes (de types différents), générer du SVG dynamiquement.

Énoncé

Tu vas créer un mini-éditeur de formes. Démarre avec ce tableau :

const formes = [
  { type: "rect",   x: 10,  y: 10,  largeur: 80, hauteur: 60, couleur: "#ff0066" },
  { type: "cercle", cx: 200, cy: 100, r: 40, couleur: "#00ccff" },
  { type: "ligne",  x1: 0, y1: 0, x2: 300, y2: 200, couleur: "#000000" }
];

Étapes :

1. Affiche les 3 formes initiales dans un <svg> en bouclant sur le tableau (utilise un if ou un switch selon le type pour générer la bonne balise SVG).
2. Crée un formulaire où l'utilisateur choisit :
   • le type de forme (rectangle, cercle, ligne) via un <select>
   • les paramètres correspondants (position, taille, couleur)
3. Au clic sur "Ajouter", push la nouvelle forme dans formes et redessine tout le SVG.

💡 Astuce UX : affiche/cache les inputs selon le type sélectionné (un cercle n'a pas besoin de largeur / hauteur).

Bonus 💡 : ajoute une opacité et une bordure (couleur + épaisseur) à toutes les formes.

• Pistes : attributs SVG opacity, stroke, stroke-width
• MDN — SVG attribute reference

Récap#

À la fin de ce chapitre, tu sais :

• ✅ Créer un objet et lui donner des propriétés
• ✅ Accéder à ses propriétés (point ou crochets) et les modifier
• ✅ Définir des méthodes et utiliser this
• ✅ Imbriquer des objets et des tableaux pour modéliser des données complexes
• ✅ Distinguer un objet JavaScript d'un texte JSON
• ✅ Convertir entre objet et JSON avec JSON.stringify et JSON.parse
• ✅ Importer un fichier JSON dans un projet Vite