A quoi sert la notation JSON

Le JSON ( Javascript Object Notation) est un format d’échange de données très utilisé dans le domaine du web et pas forcément que dans du Javascript. En fait PHP aussi possède des fonction pour encoder un tableau associatif en tableau JSON.

Vous aurez besoin de JSON quand vous allez faire de l’AJAX. Où quand vous allez faire appel à une API chez n’importe quel fournisseur de service Saas possédant une API digne du nom.

Explication de la syntaxe JSON

Un objet JSON est écrit dans des accolades.

{action:edit,id:1956} cette chaîne JSON va inclure comme clé de tableau action et id. Par exemple vous avez une application web en AJAX qui permet d’éditer, d’effacer, un article ou un item identifié par son id. Quand vous cliquez sur le lien « Editer », une action AJAX va envoyer un tableau JSON contenant comme information le type d’action et l’id de l’objet à effacer.

Utiliser en PHP et AJAX

On utilise couramment JQuery pour des traitement AJAX, n’essyez pas de le coder vous même en Javascript pure (compliqué, sujet aux erreus)

Imaginons que vous avez une page html dynamique écrite avec PHP et que vous avez un bouton qui va rafraichir une partie de la page (cours de bourse de Michelin par exemple), en cliquant sur le lien « Rafraichir cours de bourse », un appel AJAX est fait à un script PHP « update_cours_de_bourse.php » (dans la réalité je le nommerais do.php tout simplement).

Ce fichier do.php va calculer le cours de bourse de Michelin et retourner un tableau JSON, on utilisera simplement la commande echo de PHP pour afficher les valeurs JSON :

echo {label:michelin,cours:26.5}

le résultat sera lu par JQuery de la page appelante, grâce à une fonction callback (une fonction qui lit la valeur retournée par la page do.php).

JSON (JavaScript Object Notation) : le guide complet pour comprendre et utiliser JSON

Par Yvon Huynh – Mise à jour 2026

À quoi sert la notation JSON ?

Le JSON (JavaScript Object Notation) est aujourd’hui le format d’échange de données le plus utilisé sur Internet. Bien qu’il soit né avec JavaScript, il est désormais compatible avec pratiquement tous les langages de programmation : PHP, Python, Java, C#, Go, Rust, Node.js, Ruby et bien d’autres. Son principal avantage est d’offrir un format de données léger, facilement lisible par un humain tout en étant très simple à interpréter par une machine.

Dans une application web moderne, JSON est omniprésent. Chaque fois qu’un navigateur communique avec un serveur, qu’une application mobile consulte une API REST, qu’un framework JavaScript comme React, Vue.js ou Angular récupère des données, il y a de très fortes chances que ces informations transitent au format JSON. Même les applications de bureau, les objets connectés (IoT), les services Cloud et les bases de données NoSQL comme MongoDB utilisent massivement JSON.

Vous utiliserez également JSON lorsque vous développerez des appels AJAX, lorsque vous consommerez une API publique (Google Maps, Stripe, OpenAI, GitHub…), ou encore lorsque vous sauvegarderez des paramètres de configuration dans un fichier.

Pourquoi JSON est-il devenu un standard ?

Avant JSON, de nombreuses applications échangeaient leurs données au format XML. Ce dernier est toujours utilisé dans certains domaines (banques, administration, SOAP), mais il est beaucoup plus verbeux et plus difficile à manipuler.

JSON est devenu le standard pour plusieurs raisons :

• il est beaucoup plus compact ;
• il est très facile à lire ;
• il est directement interprétable en JavaScript ;
• il existe des bibliothèques dans tous les langages ;
• il réduit la quantité de données échangées sur le réseau.

Aujourd’hui, lorsque vous consultez une API REST, la réponse est presque toujours au format JSON. C’est également le format utilisé par les applications mobiles Android et iOS pour dialoguer avec leurs serveurs. Si vous souhaitez devenir développeur web, savoir manipuler JSON est tout simplement indispensable.

Comprendre la syntaxe JSON

Un objet JSON est toujours écrit entre accolades.

Exemple :

{
  "action": "edit",
  "id": 1956
}

Contrairement à JavaScript où certaines écritures sont tolérées, un document JSON valide impose des règles strictes :

• toutes les clés doivent être entourées de guillemets doubles ;
• les chaînes de caractères doivent également être entre guillemets ;
• les nombres ne sont pas entourés de guillemets ;
• les booléens sont écrits true ou false ;
• les valeurs nulles sont écrites null.

Beaucoup de développeurs débutants oublient les guillemets autour des propriétés ou ajoutent une virgule après le dernier élément. Ces erreurs rendent immédiatement le JSON invalide et provoquent des erreurs lors du décodage.

Les différents types de données en JSON

JSON sait représenter plusieurs types de données.

Une chaîne de caractères :

{
  "nom": "Michel"
}

Un nombre :

{
  "age": 42
}

Un booléen :

{
  "admin": true
}

Une valeur nulle :

{
  "telephone": null
}

Un tableau :

{
  "notes": [12, 15, 18, 20]
}

Un objet imbriqué :

{
  "utilisateur": {
    "nom": "Martin",
    "ville": "Toulouse"
  }
}

Ces quelques structures suffisent à représenter pratiquement toutes les données d’une application moderne.

Les tableaux JSON

Un tableau JSON est représenté entre crochets.

Par exemple :

[
  "PHP",
  "JavaScript",
  "Python"
]

ou encore :

[
  {
    "id": 1,
    "nom": "Paul"
  },
  {
    "id": 2,
    "nom": "Julie"
  }
]

C’est le format le plus courant lorsqu’une API retourne une liste de produits, de clients, de formations ou d’articles.

JSON et PHP

PHP possède deux fonctions extrêmement importantes :

• json_encode()
• json_decode()

Transformer un tableau PHP en JSON :

$personne = [
    "nom" => "Martin",
    "age" => 32
];

echo json_encode($personne);

Résultat :

{
  "nom": "Martin",
  "age": 32
}

Dans l’autre sens :

$json = '{"nom":"Martin","age":32}';

$data = json_decode($json, true);

echo $data["nom"];

Le deuxième paramètre de json_decode() est souvent oublié. En mettant true, PHP retourne un tableau associatif au lieu d’un objet, ce qui simplifie énormément le développement.

JSON et AJAX

L’un des usages les plus populaires de JSON est la communication AJAX.

Imaginons une application qui affiche le cours de bourse de Michelin. Lorsqu’un utilisateur clique sur le bouton Actualiser, le navigateur envoie une requête HTTP vers un script PHP.

Le fichier do.php pourrait retourner :

echo json_encode([
    "label" => "Michelin",
    "cours" => 26.50
]);

Le navigateur reçoit alors :

{
  "label": "Michelin",
  "cours": 26.5
}

Le JavaScript met simplement à jour la partie concernée de la page sans effectuer un rechargement complet. C’est ce mécanisme qui rend les applications web modernes beaucoup plus fluides.

Aujourd’hui, on utilise Fetch plutôt que jQuery

En 2017, jQuery était pratiquement incontournable pour effectuer des appels AJAX. Ce n’est plus le cas aujourd’hui.

Les navigateurs disposent désormais de l’API Fetch, intégrée nativement.

Exemple :

fetch("do.php")
    .then(response => response.json())
    .then(data => {
        console.log(data.cours);
    });

Cette approche est devenue le standard du développement JavaScript moderne et fonctionne sans bibliothèque supplémentaire.

JSON et les API REST

Lorsque vous utilisez une API, vous envoyez généralement des données JSON au serveur et celui-ci vous répond également en JSON.

Par exemple :

Requête :

{
  "email": "contact@test.com",
  "password": "secret"
}

Réponse :

{
  "success": true,
  "token": "eyJhbGciOi..."
}

Les API de Stripe, GitHub, OpenAI, Google Maps, Facebook ou encore Notion utilisent toutes JSON comme format principal d’échange.

Les erreurs les plus fréquentes avec JSON

La majorité des erreurs rencontrées par les développeurs concernent la syntaxe.

Les plus courantes sont :

• oublier les guillemets autour des clés ;
• mettre une virgule après le dernier élément ;
• utiliser des apostrophes au lieu des guillemets doubles ;
• oublier d’échapper certains caractères spéciaux ;
• envoyer du HTML au lieu d’un document JSON ;
• mélanger JSON et objet JavaScript.

Une autre erreur très fréquente est d’envoyer un message d’erreur PHP avant le JSON. Une simple notice PHP affichée avant le document JSON rend toute la réponse invalide.

Comment valider un document JSON ?

Lorsque votre JSON semble incorrect, il existe de nombreux validateurs en ligne permettant de vérifier rapidement la syntaxe.

Vous pouvez également utiliser les outils de développement de Chrome, Firefox ou Edge pour inspecter les réponses des requêtes AJAX et visualiser directement le JSON retourné par votre serveur.

La majorité des éditeurs modernes (Visual Studio Code, PhpStorm, IntelliJ IDEA) mettent également en évidence les erreurs de syntaxe JSON au moment de la saisie.

JSON.parse() et JSON.stringify()

En JavaScript, deux fonctions sont incontournables.

Transformer une chaîne JSON en objet JavaScript :

let utilisateur = JSON.parse(json);

Transformer un objet JavaScript en chaîne JSON :

let texte = JSON.stringify(utilisateur);

Ces deux méthodes sont utilisées quotidiennement dans pratiquement toutes les applications web modernes. Elles servent notamment lors des appels API, du stockage dans le Local Storage ou de la communication entre le navigateur et le serveur.

JSON et le Local Storage

Le Local Storage du navigateur ne peut stocker que des chaînes de caractères.

Pour sauvegarder un objet :

localStorage.setItem(
    "user",
    JSON.stringify(utilisateur)
);

Pour le récupérer :

let user = JSON.parse(
    localStorage.getItem("user")
);

C’est probablement l’une des utilisations les plus fréquentes de JSON.stringify() dans une application JavaScript.

JSON ou XML : lequel choisir ?

Aujourd’hui, dans l’immense majorité des projets web, JSON est préféré à XML.

JSON est :

• plus léger ;
• plus rapide à analyser ;
• plus facile à lire ;
• plus simple à produire ;
• parfaitement adapté aux API REST.

XML reste encore utilisé dans certains secteurs historiques (banques, administration, SOAP, documents bureautiques), mais pour une nouvelle application web, JSON est quasiment toujours le meilleur choix.

Bonnes pratiques pour utiliser JSON

Pour terminer, voici quelques bonnes pratiques largement adoptées par les développeurs :

• toujours produire un JSON valide ;
• utiliser des noms de propriétés explicites (firstName plutôt que fn) ;
• éviter les structures trop profondément imbriquées ;
• documenter le format des échanges lorsqu’on développe une API ;
• vérifier systématiquement les erreurs lors du décodage (json_last_error() en PHP) ;
• utiliser UTF-8 pour éviter les problèmes d’encodage ;
• ne jamais construire du JSON à la main en concaténant des chaînes de caractères, mais toujours utiliser les fonctions prévues (json_encode() en PHP, JSON.stringify() en JavaScript).

Ces bonnes pratiques permettent de rendre vos applications plus robustes, plus maintenables et plus faciles à faire évoluer.

Conclusion

JSON est devenu un pilier du développement web moderne. Que vous développiez une application PHP, Node.js, Python, Java, C# ou Go, vous manipulerez quotidiennement ce format d’échange de données. Maîtriser JSON, savoir créer des objets, des tableaux, utiliser json_encode(), json_decode(), JSON.parse() et JSON.stringify(), comprendre les appels AJAX et les API REST constitue aujourd’hui une compétence incontournable pour tout développeur web.

En maîtrisant JSON, vous serez capable d’échanger des données entre un navigateur, un serveur, une base de données ou un service Cloud. C’est une compétence essentielle pour développer des applications modernes, des API REST, des applications mobiles, des architectures microservices et des solutions basées sur le Cloud.

Découvrez les fonctions fléchées en Javascript

 

Dans javascript on connaissait jusqu’en ES6 deux façon de déclarer des fonctions, les fonctions nommées et les fonctions anonymes.

Déclaration de fonctions nommées :

function saluer(nom){
    console.log('Bonjour ' + nom)
}

Les fonctions anonymes

function (nom){
    console.log('Bonjour ' + nom)
}

Depuis ES6 vous pouvez déclarer les fonction flèches !

Attention les fonctions flèches ne sont pas équivalentes aux fonction nommées. Une fonction flèche n’a pas de this . Les fonctions flèches sont toujours anonymes. Elles ne peuvent être utilisé comme constructeur.

const add = (a) => return a + 5

add(5) //10

Les fonctions flèches ne sont pas à utiliser en tant que méthode

D’abord c’est quoi la différence entre une fonction et une méthode?

une méthode est une fonction définie en tant que propriété d’un objet, sinon pas de différence au niveau de la syntaxe. Dans le cas des fonctions flèches, il y a une différence de comportement vis à vis de this.

L’exemple ci-dessous  :

var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
    console.log(this.i, this)
    }
}

obj.b(); // undefined Window {...}
obj.c(); // 10  Object{i:10}

Alors qu’une fonction anonyme connait son propre this, une fonction flèche n’a pas son propre this, comme l’atteste l’affichage, le this de la fonction se réfère à l’objet Window.

Les fonctions flèches n’ont pas de constructeur

var Foo = function{}()
var f = new Foo()

var Bar = () => {}
var b = new Bar() //Uncaught TypeError : Foo is not a constructor

Aujourd’hui en 2017 si vous développez en HTML/CSS directement dans le dur, je vous prédis que vous allez souffrir.

On ne développe plus ne CSS directement, on passe par le LESS ou le SASS.

Personnellement j’utilise le SASS, c’est un lagage qui va être transformé en CSS grâce à un programme qu’on appelle un compilateur.

Mais voyons tout de suite les avantage d’utiliser le SASS:

Supposons que vous ayez une div à l’intérieur d’une autre.

<div class="outer">
    <div class="inner">
        <a href="//google.fr">Google</a>
    </div>
</div>

Pour styler les div, vous faites en CSS:

.outer {font-size:12px}

.inner{font-size:10px}
.inner a {color : blue}

 

Programmer en ECMASCRIPT 6 alias ES2015

Si vous faites du Web, vous avez sans doute entendu abondamment parler de Ecmascript 6. C’est une norme qui décrit la syntaxe du langage Javascript (pour simplifier)

Voyons les innovations syntaxiques que vous devez absolument connaitre car tous les navigateurs les utilisent aujourd’hui.

Déclaration de variable avec var (méthode historique)

Jusqu’à présent vous ne déclariez les variables qu’avec var.

Or il cause beaucoup de poblèmes : son scope est global à l’objet window.

var prenom = "Yvon"

On dit que son scope (sa portée) est globale. Si vous venez du monde du php, vous avez dû voir qu’on peut déclarer une variable comme globale avec le mot clé global.

Pour des raisons de bonne pratique de sécurité, il faut éviter de déclarer des variables globales.

Revenons au Javascript, var déclare une variable de porté globale, c’est à dire qu’elle peut être utilisée partout.

Jusqu’à récemment avant ES6, nous ne pouvions déclarer de variable de porté de type bloc. Un bloc est tout ce qui est compris dans une parie d’accolade.

Une variable de type bloc, de portée bloc, n’existe que dans la paire d’accolade, en dehors on ne la connait pas.

Historiquement var a été introduit pou faciliter la programmation, afin que les programmeurs novices puissent utiliser rapidement Javascript. Mais au fil du temps cela s’est avéré être un mauvais choix. Aujourd’hui (seulement) les concepteur du langage on décidé d’introduire deux nouvelles façons de déclarer une variable. Ces deux nouvelles façons const et let déclarent des variables de porté de bloc.

Déclaration de variable avec const

A la différence de PHP par exemple, const ne déclare pas une constante ! La signification de const est que le binding est constant, invariable, vous ne pouvez pas réassigner la variable à un pointeur différent, mais vous pouvez modifier sa valeur. En Javascript, la notion de constante existe dans le cadre de la programmation fonctionnelle via des librairie comme immutable.js .

cont prenom = "Yvon"

Pour vous montrer que const a sa valeur qui peut changer :

const prenom = 'Yvon' prenom = 'Julien' console.log(prenom) // Erreur Uncaught TypeError: Assignment to constant variable. 

Le code ci-dessus montre que la valeur de la primitive n’est pas modifiable. Par contre, si on déclare un objet litéral :

const eleve = { prenom :'Yvon', nom : 'Huynh'} eleve.prenom = 'Julien' console.log(eleve.prenom) // Julien

 

On peut modifier une propriété d’un objet litéral. eleve est bindée par référence à cet objet. Mais si on essai de réaffecter par référence :

const eleve = { prenom : 'yvon', nom : 'huynh' } eleve = { prenom : 'toto' } console.log(eleve.prenom) // Uncaught TypeError: Assignment to constant variable.

Une autre particularité de const est que vous devez initialiser dè sla déclaration de la variable, sinon vous avez une erreur.

const pays; //Uncaught SyntaxError: Missing initializer in const declaration

Block scope avec const

Enfin regardons l’aspect le plus important concernant const, il est block scoped, c’est à dire qu’en dehors (à l’extérieur) des accolades où la variable a été définie, elle n’existe pas.

function saluer(ami){ const pays = 'France' if(pays === 'France'){ const greet = ' Monsieur' console.log('Bienvenue en ' + pays + greet) } console.log('A une autre fois en ' + pays) console.log('Au revoir ' + greet) } saluer('Yvon') // imprime Bienvenue en France Monsieur,A une autre fois en France, mais affiche Uncaught ReferenceError: greet is not defined

Alors que pays reste en valable, greet n’est plus connue en dehors des accolades où greet a été définie.

Un exemple encore plus flagrant on va créer deux variables portant le même nom,mais avec des valeurs différentes :

const ville = 'Paris' function saluer(nom){ const ville = 'Nantes' console.log('bienvenue à ' + ville) } saluer('Yvon') //bienvenue à Nantes console.log('Euh non on est à ' + ville) //Euh non on est à Paris

Nantes ne peut exister en dehors des accolades de la fonction.

 

Peut on rendre une variable const vraiment immuable?

Même si dans votre vie vous aurez probablement peu l’opportunitéde rendre un objet immuable, il existe une façon de rendre immuable une variable déclarée avec const.

const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.prenom ='Julien' console.log(eleve.prenom) // yvon

Vous remarquez que la propriété prenom est inchangée. Si vous utilisez « use strict »; vous aurez une erreur Uncaught TypeError: Cannot assign to read only property ‘prenom’ of object ‘#

Object.freeze est ‘shallow’ comme on dit en anglais, cela veut dire que vous pouvez quand même altérer les propriétés des objets imbriquée.

"use strict"; const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.adresse.codepostal = 44100 console.log(eleve.adresse.codepostal) // 44100

Le code ci-dessus est tout à fait valide.

A quoi ça sert const en Javascript?

On dit que les variables déclarées avec const sont « block scoped ». Un bloc c’est ce qui est entre accolade dans la définition d’une fonction. C’est pour pallier au défaut de var (qui est défini dans les accolades d’une fonction, on dit que var est function scoped), qu’on a introduit const afin de mieux structurer son code et d’éviter des collisions.

 

Qu’est ce que la Temporal Dead Zone?

Lorsqu’un code javascrip est exécuté, une variable ne peut être settée ou gettée tant que l’exécution n’a pas atteint la ligne de code où la variable a été définie.

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) var pays = 'France' } } saluer('yvon') // Pays = undefined Ville destination = Paris

On voit que la variable pays étant définie après le console.log, il est à undefined. Par contre que se passe-t-il si on a const à la place de var ?

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) const pays = 'France' } } saluer('yvon') //Uncaught ReferenceError: pays is not defined

Vous avez une erreur (un avertissement) comme quoi votre variable n’est pas définie. Au moment ou le console.log s’exécute, pays n’est pas encore définie, elle n’a pas de valeur attribuée. L’utilité de la Temporal Dead Zone (TDZ) est de vous permettre de coder plus proprement, en lançant des avertissements.