JSON (prononciation comme Jason Bourne !) signifie JavaScript Object Notation et c’est un format de données. Autrement dit, c’est une façon de stocker des informations, un peu comme une base de données. Bien que créé indépendamment de la spécification ECMAScript, il est maintenant lié à JavaScript qui inclut un objet JSON, et de nombreux développeurs l’incorporent quasiment comme un sous-ensemble du langage.

Voici un exemple de syntaxe JSON :

 

Comme vous le voyez, JSON est un format de données consistant en paires de nom/valeur (ou clé/valeur) ayant la forme de chaînes de caractères. Les nom et valeur sont séparés par deux points : et chaque paire est séparée de la suivante par une virgule.

Bien que trouvant sa source dans JavaScript, beaucoup de langages de programmation (si ce n’est tous ?) peuvent générer et lire le format JSON. Il est donc devenu très populaire pour le stockage, la lecture et le partage d’information dans les applications et services web.

Comme son nom l’indique, JSON est plus ou moins un object JavaScript, cependant il y a des différences. Tout d’abord, comme expliqué dans la spécification, “JSON est un format texte facilitant l’échange de données structurées entre tous les langages de programmation”. Il est donc universel et non pas limité à JavaScript. En fait, il ne fait pas du tout partie de JavaScript, il est simplement dérivé de la façon dont les objets JavaScripts sont écrits.

En termes de syntaxe, il y a deux différences principales. Tout d’abord, tous les noms (clés) sont représentés sous forme de chaînes de caractères, autrement dit ils doivent être entre guillemets. Ceci par exemple n’est pas du JSON valide :

 

 

Remarquez que JSON requiert non seulement que le nom (la clé) soit entre guillemets, mais aussi que les guillemets soient doubles : les guillemets simples sont possibles sur les objets JavaScript, pas dans JSON.

L’autre différence majeure est dans le type de données que JSON peut stocker. JSON accepte les valeurs suivantes :

C’est assez similaire à ce qu’on trouve dans les objets JS, mais JSON étant représenté sous forme de texte on ne peut pas lui donner des choses du genre fonctions ou des valeurs dynamiques de dates utilisant Date(). Par conséquent, il n’y a pas de méthodes ou autres fonctionnalités dans JSON, il n’y a que du texte. Et c’est bien ainsi, car c’est ce qui en fait un format universel d’échange de données.

Il est important de noter qu’un morceau complet de JSON est lui-même techniquement un objet JSON, et le type Objet est ce qui permet d’imbriquer des objets JSON comme valeurs, un peu comme les objets dans JavaScript. Ci-dessous, on a un exemple d’objet JSON imbriqué :

Ici, l’objet JSON racine a 4 paires de clés/valeurs (“species”, “breed”, “age”, et “traits”) mais la quatrième valeur est un objet imbriqué comprenant 3 paires de clés/valeurs. Et comme vous l’avez sans doute deviné, on peut imbriquer les objets à l’infini (mais restez raisonnable).

Un objet JavaScript ressemblerait à ceci :

Vous voyez les différences avec JSON (les guillemets) et de plus, pour que l’objet soit utile en JavaScript il est créé comme valeur d’une variable (myAnimal).

 

 

JSON étant du texte, on peut le stocker où l’on veut. Dans une base de données, dans un fichier texte, un stockage client (cookies ou localStorage) ou via son propre format de fichier qui utilise l’extension .json (qui est en gros un fichier texte avec une extension .json).

Une fois le contenu JSON stocké, il reste donc à pouvoir le récupérer et le parser de manière appropriée. Selon les langages, il y a diverses façons de récupérer et parser JSON, mais puisque nous nous intéressons au développement front-end, je vais montrer comment le faire en JavaScript.

JavaScript propose deux méthodes, qui font partie de la spécification ECMAScript, pour réaliser deux tâches distinctes.

Admettons que votre application construise des données d’une manière ou d’une autre. Pour conserver ces données quelque part, elles doivent être converties en une chaîne de caractères (string) JSON valide. Vous pouvez le faire avec JSON.stringify()

La méthode JSON.stringify() prend un paramètre obligatoire (le JSON que vous voulez convertir en string) et deux arguments optionnels. Le premier est une fonction de remplacement que vous pouvez utiliser pour filtrer certaines paires clé/valeur que vous ne voulez pas inclure. Je n’ai rien exclu dans mon exemple, donc j’ai indiqué null à la place de la fonction de remplacement. D’habitude je n’utilise pas null, mais je voulais utiliser le troisième argument et pour cela il est obligatoire de mentionner le second.

Le troisième paramètre est la valeur d’espace, il vous aide à formater le JSON de façon à le rendre plus lisible avec indentation, retour à la ligne, etc. Si vous utilisez un nombre pour le troisième argument, il représentera le nombre d’espaces pour l’indentation.

À l’inverse, si vous recevez du JSON et que vous voulez l’utiliser dans votre JavaScript, vous pouvez utiliser la méthode JSON.parse() :

 

 

Dans l’exemple ci-dessus, je crée manuellement une chaîne de caractères JSON que je stocke dans une variable. C’est juste pour la démonstration, dans un scénario réel le JSON pourrait venir d’une source externe ou d’un fichier JSON séparé.

La méthode JSON.parse() convertit la chaîne de caractères JSON en un objet que je peux manipuler avec JavaScript. La chaîne de caractères est le seul argument obligatoire de la méthode, mais vous pouvez ajouter un second argument optionnel que l’on appelle un reviver de la fonction. En voici un exemple, qui part du JSON précédent :

 

Si vous regardez le résultat sur JS Bin, vous verrez que notre Labrador Retriever est devenu un chat. C’est juste un exemple qui nous montre que l’on peut modifier les valeurs d’un des noms. Pour plus d’infos sur ces fonctions, vous pouvez consulter MDN ou cet article sur le codage web dynamique.

XML n’est certainement pas un format en voie de disparition, mais JSON le surpasse largement en popularité. Douglas Crockford explique les avantages de JSON sur XML (“le XML sans gras”) et je cite un extrait ici :

Il poursuit en détaillant les avantages proclamés de XML et en montrant pourquoi JSON fait mieux.