Comment travailler avec JSON en JavaScript

Introduction

Parce que JSON est dérivé du langage de programmation JavaScript, c’est un choix naturel à utiliser comme format de données en JavaScript. JSON, abréviation de JavaScript Object Notation, est généralement prononcé comme le nom « Jason.”

Pour en savoir plus sur JSON en termes généraux, lisez le tutoriel  » Une introduction à JSON « .

Pour commencer à réfléchir à l’endroit où vous pouvez utiliser JSON dans vos programmes JavaScript, certains cas d’utilisation généraux de JSON incluent:

• Stockage de données
• Génération de structures de données à partir d’une entrée utilisateur
• Transfert de données d’un serveur à un client, d’un client à un serveur et d’un serveur à un serveur
• Configuration et vérification des données

Ce tutoriel vous donnera une introduction au travail avec JSON en JavaScript. Pour tirer le meilleur parti de cette introduction, vous devez vous familiariser avec le langage de programmation JavaScript.

Format JSON

Le format JSON est dérivé de la syntaxe d’objet JavaScript, mais il est entièrement basé sur du texte. Il s’agit d’un format de données clé-valeur qui est généralement rendu entre accolades.

Lorsque vous travaillez avec JSON, vous verrez probablement des objets JSON dans un fichier .json, mais ils peuvent également exister en tant qu’objet ou chaîne JSON dans le contexte d’un programme. En savoir plus sur la syntaxe et la structure ici.

Lorsque vous travaillez avec un fichier .json, il ressemblera à ceci:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Si, à la place, vous avez un objet JSON dans un fichier .js ou .html, vous le verrez probablement défini sur une variable :

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

De plus, vous pouvez voir JSON comme une chaîne plutôt qu’un objet dans le contexte d’un fichier ou d’un script de programme JavaScript. Dans ce cas, vous pouvez également tout voir sur une seule ligne:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

La conversion d’objets JSON en chaînes peut être particulièrement utile pour transporter des données de manière rapide.

Nous avons passé en revue le format général de JSON et la façon dont vous pouvez vous attendre à le voir comme un fichier .json, ou dans JavaScript comme un objet ou une chaîne.

Comparaison avec l’objet JavaScript

Il convient de garder à l’esprit que JSON a été développé pour être utilisé par n’importe quel langage de programmation, tandis que les objets JavaScript ne peuvent être utilisés que directement via le langage de programmation JavaScript.

En termes de syntaxe, les objets JavaScript sont similaires à JSON, mais les clés des objets JavaScript ne sont pas des chaînes entre guillemets. De plus, les objets JavaScript sont moins limités en termes de types passés aux valeurs, ils peuvent donc utiliser des fonctions comme valeurs.

Regardons un exemple d’objet JavaScript de l’utilisateur du site Sammy Shark qui est actuellement en ligne.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Cela vous semblera très familier en tant qu’objet JSON, mais il n’y a pas de guillemets autour de l’une des clés (first_namelast_nameonline, ou full_name), et il y a une valeur de fonction dans la dernière ligne.

Si nous voulons accéder aux données de l’objet JavaScript ci-dessus, nous pourrions utiliser la notation par points pour appeler user.first_name; et obtenir une chaîne, mais si nous voulons accéder au nom complet, nous devrions le faire en appelant user.full_name(); car c’est une fonction.

Les objets JavaScript ne peuvent exister que dans le langage JavaScript, donc lorsque vous travaillez avec des données qui doivent être accessibles par différents langages, il est préférable d’opter pour JSON.

Accès aux données JSON

Les données JSON sont normalement accessibles en Javascript via la notation par points. Pour comprendre comment cela fonctionne, considérons l’objet JSON sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Afin d’accéder à l’une des valeurs, nous utiliserons une notation par points qui ressemble à ceci :

sammy.first_namesammy.last_namesammy.online

La variable sammy est en premier, suivi d’un point, suivi de la clé à accéder.

Pour créer une alerte JavaScript qui nous montre la valeur associée à la clé first_namedans une fenêtre contextuelle, nous pouvons le faire en appelant la fonction JavaScript alert():

alert(sammy.first_name);

Output
Sammy

Ici, nous avons appelé avec succès la valeur associée à la clé first_name de l’objet JSON sammy.

Nous pouvons également utiliser la syntaxe des crochets pour accéder aux données à partir de JSON. Pour ce faire, nous garderions la clé entre guillemets doubles entre crochets. Pour notre variable sammy ci-dessus, en utilisant une syntaxe entre crochets dans une fonction alert() ressemble à ceci:

alert(sammy);

Output
true

Lorsque vous travaillez avec des éléments de tableau imbriqués, vous devez appeler le numéro de l’élément dans votre tableau. Considérons le JSON ci-dessous:

var user_profile = { "username" : "SammyShark", "social_media" : }

Pour accéder à la chaîne facebook, nous pouvons appeler cet élément dans le tableau dans le contexte de la notation par points:

alert(user_profile.social_media.description);

Output
facebook

Notez que pour chaque élément imbriqué, nous utiliserons un point supplémentaire.

L’utilisation de la notation par points ou de la syntaxe des crochets nous permet d’accéder aux données contenues au format JSON.

Fonctions pour travailler avec JSON

Cette section examinera deux méthodes pour stringifier et analyser JSON. Pouvoir convertir JSON d’un objet en chaîne et vice versa est utile pour transférer et stocker des données.

JSON.stringify()

La fonction JSON.stringify() convertit un objet en chaîne JSON.

Les chaînes sont utiles pour transporter des données d’un client vers un serveur en stockant ou en transmettant des informations de manière légère. Par exemple, vous pouvez rassembler les paramètres d’un utilisateur côté client, puis les envoyer à un serveur. Plus tard, vous pouvez ensuite lire les informations avec la méthode JSON.parse() et travailler avec les données au besoin.

Nous examinerons un objet JSON que nous affecterons à la variable obj, puis nous le convertirons en utilisant JSON.stringify() en passant obj à la fonction. Nous pouvons affecter cette chaîne à la variable s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

Maintenant, si nous travaillons avec s, nous aurons le JSON à notre disposition sous forme de chaîne plutôt que d’objet.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

La fonction JSON.stringify() nous permet de convertir des objets en chaînes. Pour faire le contraire, nous examinerons la fonction JSON.parse().

JSON.les chaînes parse()

sont utiles pour le transport, mais vous voudrez pouvoir les convertir en un objet JSON côté client et/ ou serveur. Bien que vous puissiez convertir du texte en objet avec la fonction eval(), elle n’est pas très sécurisée, nous utiliserons donc la fonction JSON.parse() à la place.

Pour convertir l’exemple dans le JSON.section stringify() ci-dessus, nous passerions la chaîne s à la fonction, et l’affections à une nouvelle variable:

var o = JSON.parse(s)

Ensuite, nous aurions l’objet o avec lequel travailler, qui serait identique à l’objet obj.

Pour approfondir, considérons un exemple de JSON.parse() dans le contexte d’un fichier HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

Dans le contexte d’un fichier HTML, nous pouvons voir comment la chaîne JSON s est convertie en un objet récupérable lors du rendu final de la page en accédant au JSON via la notation par points.

JSON.parse() est une fonction sécurisée pour analyser les chaînes JSON et les convertir en objets.

Conclusion

JSON est un format naturel à utiliser en JavaScript et possède de nombreuses implémentations disponibles pour une utilisation dans de nombreux langages de programmation populaires. Si vous souhaitez utiliser le format dans un autre langage de programmation, vous pouvez voir la prise en charge complète du langage sur le site « Introduction de JSON ».

Parce qu’il est léger et qu’il est facilement transféré entre les langages de programmation et les systèmes, JSON bénéficie d’une prise en charge accrue des API, y compris l’API Twitter.