Si vous êtes nouveau dans le développement web, que vous avez des connaissances de HTML, CSS et même de JavaScript, JSON est important à connaître.
Qu’est-ce que JSON ?
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.
Différences entre JSON et JavaScript Object
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 :
Objet
Array
Nombre
Chaîne de caractères
true
false
null
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).
Comment stocker JSON ?
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.
Utiliser JSON.stringify()
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.
Utiliser JSON.parse()
À 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.
JSON mieux que XML ?
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 :
“XML n’est pas idéal pour les échanges de données, de même qu’un tournevis n’est pas fait pour enfoncer des clous. Il porte avec lui un lourd bagage et ne correspond pas au modèle de données de la plupart des langages de programmation. Lorsque les programmeurs ont vu XML pour la première fois, ils ont été choqués par sa laideur et son inefficacité. Cette première réaction était la bonne. Il existe une autre notation textuelle qui posséde tous les avantages de XML et se révèle bien mieux adaptée aux échanges de données — cette notation est JSON.”
Il poursuit en détaillant les avantages proclamés de XML et en montrant pourquoi JSON fait mieux.
Nous utilisons des cookies sur notre site Web pour vous offrir l'expérience la plus pertinente en mémorisant vos préférences et vos visites répétées. En cliquant sur "Accepter tout", vous consentez à l'utilisation de TOUS les cookies. Cependant, vous pouvez visiter "Paramètres des cookies" pour fournir un consentement contrôlé.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Les cookies fonctionnels aident à réaliser certaines fonctionnalités comme le partage du contenu du site web sur les plateformes de médias sociaux, la collecte de commentaires et d'autres fonctionnalités de tiers.
Les cookies de performance sont utilisés pour comprendre et analyser les indices de performance clés du site web, ce qui permet d'offrir une meilleure expérience utilisateur aux visiteurs.
Les cookies analytiques sont utilisés pour comprendre comment les visiteurs interagissent avec le site web. Ces cookies permettent de fournir des informations sur les mesures du nombre de visiteurs, le taux de rebond, la source de trafic, etc.
Les cookies publicitaires sont utilisés pour fournir aux visiteurs des annonces et des campagnes de marketing pertinentes. Ces cookies suivent les visiteurs sur les sites web et collectent des informations pour fournir des publicités personnalisées.
Les cookies nécessaires sont absolument indispensables au bon fonctionnement du site web. Ces cookies assurent les fonctionnalités de base et les caractéristiques de sécurité du site web, de manière anonyme.
EBP Gestion commerciale PRO
Lieu : Formation sur site ou en nos locaux et sur environnement de travail.