Présentation de JSON et utilisation en JavaScript

Avant de s’attaquer à l’Ajax, il convient de savoir ce qu’est JSON car cela va être l’un des formats privilégiés pour échanger des données entre pages.

Dans cette leçon, nous allons donc définir ce qu’est JSON, à quoi cette notation sert et comment l’utiliser en JavaScript.

 

Qu’est-ce que JSON ?

JSON (JavaScript Object Notation) est un format d’échange de données léger et donc performant. C’est un format de texte indépendant de tout langage mais utilisant des conventions familières aux programmeurs de la famille de langages C (incluant JavaScript et Python notamment).

JSON est une syntaxe pour sérialiser* des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs null. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.

*Sérialiser = mettre des données en série après les avoir converti dans un format donné. Par extension, la sérialisation est en informatique l’action de mettre des données sous forme binaire et de les écrire dans un fichier.

JSON peut représenter des nombres, des booléens, des chaînes, la valeur null, des tableaux (séquences de valeurs ordonnées) et des objets constitués de ces valeurs (ou d’autres tableaux et objets). JSON ne représente pas nativement des types de données plus complexes tels que des fonctions, des expressions régulières, des dates, etc.

Tout comme XML, JSON a la capacité de stocker des données hiérarchiques contrairement au format CSV plus traditionnel.

 

Les structures de données et leur représentation JSON

JSON est construit par rapport à deux structures :

  • Une collection de paires nom / valeur. Dans les différentes langages, ce type de structure peut s’appeler objet, enregistrement, dictionnaire, table de hachage, liste à clé ou tableau associatif.
  • Une liste ordonnée de valeurs. Dans la plupart des langages, c’est ce qu’on va appeler tableau, liste, vecteur ou séquence.

Ces deux structures sont des structures de données universelles. Pratiquement tous les langages de programmation modernes les prennent en charge sous une forme ou une autre. Il est logique qu’un format de données interchangeable avec les langages de programmation soit également basé sur ces structures.

En JSON, ces deux structures se retrouvent sous les formes suivantes :

  • Un objet est un ensemble non ordonnées de paires nom : valeur. Un objet commence avec { et se termine avec }. Les noms sont suivis de : et les paires nom : valeur sont séparées par des ,
  • Un tableau est une collection ordonnée de valeurs. Un tableau commence avec [ et se termine avec ]. Les valeurs sont séparées par des ,

Une valeur peut être une chaine de caractères entourées par des guillemets doubles, un nombre, un booléen, la valeur null, un objet ou un tableau.

Exemple de données au format JSON :

Exemple de donnés au format JSON

 

JSON et JavaScript

De nombreuses personnes pensent encore que JSON fait partie du langage JavaScript et n’est qu’un objet JavaScript. C’est faux : JSON est un format de texte indépendant de tout langage.

Comme c’est également un format d’échange de données et qu’il est très populaire, il fait sens que nombre de langages proposent aujourd’hui des outils pour faire la passerelle entre le langage en question et JSON.

En JavaScript, on possède ainsi un objet JSON. L’objet JavaScript global JSON possède deux méthodes pour interpréter du JSON et convertir des valeurs en JSON. : les méthodes parse() et stringify().

La méthode parse() analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l’objet décrit par cette chaîne. On peut lui passer une option en deuxième argument qui va prendre la forme d’une fonction permettant transformer la valeur analysée avant de la transformer.

La méthode stringify() convertit une valeur JavaScript en chaîne JSON. On peut lui passer une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l’objet à inclure dans la chaîne JSON en deuxième argument facultatif.

On peut finalement lui passer un objet String ou Number en troisième argument facultatif qui va être utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.

Pour faire très simple, vous pouvez retenir que JSON.stringify() convertit des objets JavaScript en JSON tandis que JSON.parse() fait l’opération inverse et convertit du JSON en objet JavaScript.

See the Pen
Cours JavaScript 17.1.1
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire