Un tutoriel sur l'utilisation de JSON en JavaScript

Introduction

Il existe de nombreuses façons dont JSON peut être utilisé dans JavaScript. L’une de ses utilisations les plus fondamentales est le stockage de données. Vous pouvez également l’utiliser pour transférer des données entre clients, entre serveurs, ou d’un serveur à un client. D’autres applications utiles incluent la possibilité de configurer et de vérifier des données ainsi que de générer des structures de données.

Dans ce tutoriel, nous allons explorer comment vous pouvez utiliser JSON dans vos programmes JavaScript. Si vous avez une expérience préalable de la programmation avec JavaScript, cela devrait vous sembler simple.

Qu’est-ce que le JSON ?

JSON signifie JavaScript Object Notation. C’est un format conçu pour permettre le partage de différents types de données. JSON utilise principalement JavaScript comme langage de programmation principal. Il fonctionne également avec d’autres langages comme Python, PHP, Ruby, ainsi que Java. Il est facile à lire, extrêmement léger et ne nécessite pas beaucoup de mise en forme. Vous pouvez vous familiariser avec la syntaxe générale et la structure du format en suivant notre tutoriel : Un aperçu du format de partage de données JSON.

JSON peut être utilisé seul ou défini dans un autre format de fichier. Lorsqu’il est seul, il utilise l’extension .json. Lorsqu’il est dans un autre format, il apparaît soit sous forme de chaîne JSON entre guillemets, soit sous forme d’objet attribué à une variable. Par exemple, JSON peut également être utilisé au format .html. Ce format vous permet d’effectuer des transferts de données entre le serveur et le navigateur avec une relative facilité.

Le format JSON est basé sur du texte. Les données clé-valeur apparaissent entre accolades. Voici à quoi ressemble un fichier .json typique :

Si vous avez un objet JSON dans un fichier .js ou .html, il apparaîtra sous forme de variable comme ceci :

Dans certains cas, vous pouvez les voir tous sur une seule ligne. C’est lorsque le JSON s’affiche sous forme de chaîne plutôt que d’objet dans le fichier JavaScript :

Vous pouvez convertir des objets JSON en chaînes de caractères. Cela est utile lorsque vous souhaitez effectuer un transfert rapide de données.

JSON vs Objet JavaScript

Comme nous l’avons mentionné précédemment, JSON fonctionne avec n’importe quel langage de programmation. Cependant, vous ne pouvez travailler avec des objets JavaScript qu’en utilisant JavaScript. La syntaxe en JSON et en JavaScript est similaire. La différence est que les objets JavaScript apparaissent dans des chaînes au lieu de guillemets. De plus, les objets JavaScript peuvent utiliser des fonctions comme valeurs, ce qui signifie qu’ils sont moins limités.

Dans l’exemple suivant, nous montrons l’option JavaScript d’un utilisateur. L’utilisateur est Sammy Shark et il est en ligne en ce moment :

Comme vous pouvez le voir, il n’y a pas de guillemets autour des clés comme first_name, last_name, online, ou full_name. De plus, il y a une valeur de fonction placée à la dernière ligne. Si vous souhaitez accéder aux données sous forme de chaîne, vous pouvez appeler user.first_name en utilisant la notation par point. Si vous voulez le nom complet à la place, vous utiliserez user.full_name(), car il s’agit d’une fonction.

Comment accéder aux données JSON

Comme nous l’avons abordé dans la section précédente, vous pouvez accéder aux données JSON en JavaScript en utilisant la notation par point. Prenons l’exemple d’un objet JSON nommé sammy:

Notre notation par point pour accéder aux valeurs sera :

La variable vient en premier. Après cela, nous plaçons un point. Enfin, nous mentionnons la clé à laquelle nous voulons accéder.

Disons que nous voulons créer une alerte en JavaScript qui affiche la valeur de la first_name clé. Pour la faire apparaître dans une fenêtre contextuelle, nous utiliserons la fonction JavaScript alert() comme ceci :

Une autre façon d'accéder aux données du JSON consiste à utiliser la syntaxe des crochets. La clé doit être placée entre guillemets doubles à l'intérieur des crochets. Voici la suite de l'exemple précédent :

Et si vous travaillez avec des éléments de tableau imbriqués ? Dans ce cas, vous devez appeler l'indice de l'élément dans le tableau. Prenez l'exemple suivant :

Disons que nous souhaitons accéder à la chaîne facebook. Voici comment nous utiliserons la notation par point pour accéder à cet élément du tableau en utilisant son indice :

N'oubliez pas d'ajouter un point supplémentaire pour chaque élément imbriqué.

Fonctions utilisées avec JSON

Ensuite, nous allons examiner quelques fonctions que vous pouvez utiliser avec JSON. Le transfert et le stockage de données deviennent très faciles lorsque vous pouvez convertir le JSON d'un objet en chaîne ou d'une chaîne en objet. Nous allons explorer comment vous pouvez sérialiser (stringify) et analyser (parse) du JSON de deux manières différentes :

• JSON.stringify()

Les chaînes de caractères sont préférables pour transférer des données de manière légère. C'est pourquoi elles sont utilisées pour stocker et transférer des données du client vers le serveur. Prenons l'exemple suivant. Disons que vous collectez les données des paramètres de l'utilisateur sur une machine. Vous devez envoyer ces informations à votre serveur. Vous utiliseriez une chaîne à cette fin. Ensuite, vous pouvez la reconvertir en utilisant JSON.parse() pour la lire et travailler avec elle.

La fonction que nous allons mettre en évidence ici est JSON.stringify(). Cette fonction convertit un objet JSON en une chaîne JSON. Dans cet exemple, nous allons attribuer notre objet à la variable obj. Nous le convertirons en utilisant la fonction JSON.stringify(). Pour ce faire, nous allons passer obj à la fonction, puis attribuer la chaîne à la variable s comme ceci :

L'appel de la variable s vous donnera le JSON sous forme de chaîne :

• JSON.parse()

Naturellement, JSON.parse() remplit la fonction inverse. Une fois le transport des données terminé, vous devez les reconvertir en objet JSON pour pouvoir travailler avec. Une option consiste à utiliser la fonction eval(). Cependant, cette approche n'est pas très sûre. C'est pourquoi nous préférons utiliser la fonction JSON.parse() .

Considérons à nouveau l'exemple précédent. Nous allons passer la chaîne s à la fonction JSON.parse(). Ensuite, nous lui attribuerons une nouvelle variable :

Notre nouvel objet est maintenant o. Il sera identique à obj. Nous y verrons plus clair en considérant JSON.parse() dans un fichier HTML comme ceci :

Ici, vous pouvez voir comment nous avons converti la chaîne s en un objet récupérable. Ainsi, JSON.parse() est une option sécurisée pour convertir des chaînes JSON en objets.

Conclusion

Comme nous l'avons vu tout au long de ce tutoriel, JSON a de nombreuses implémentations en JavaScript. Il est particulièrement utile car il peut être utilisé avec presque tous les langages de programmation, ce qui en fait le choix naturel. De plus, nous n'avons fait qu'effleurer la surface. Il y a tellement plus que vous pouvez faire avec JSON. Il est déjà pris en charge dans les API.

Voici d'autres ressources de notre blog qui vous aideront à programmer avec JavaScript :

• Apprenez comment les prototypes et l'héritage fonctionnent en JavaScript.
• Explorez en détail comment ajouter du JavaScript à l'HTML.
• Si vous créez votre propre application web, jetez un œil à notre guide sur la façon de choisir la meilleure configuration de serveur.

Bonne programmation !