TOC

Comment travailler avec JSON en JavaScript

introduction

Étant donné queJSON est dérivé du langage de programmation JavaScript, c'est un choix naturel à utiliser comme format de données dans JavaScript. JSON, abréviation deJavaScript Object Notation, se prononce généralement comme le nom «Jason».

Pour en savoir plus sur JSON en termes généraux, lisez le didacticiel «https://www.digitalocean.com/community/tutorials/an-inintroduction-to-json[An Introduction to JSON]».

Pour commencer à penser aux endroits où vous pouvez utiliser JSON dans vos programmes JavaScript, voici quelques exemples d'utilisation courante de JSON:

  • Stocker des 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 à l'autre et d'un serveur à l'autre

  • Configuration et vérification des données

Ce tutoriel vous fournira une introduction à l'utilisation de 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 lessyntax and structure here.

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

sammy.json

{
  "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 programme ou d'un script 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 rapidement des données.

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

Comparaison à un 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 par le biais du 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 en tant que valeurs.

Voyons un exemple d’objet JavaScript de l’utilisateur du site Web Sammy Shark 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 des clés (first_name,last_name,online oufull_name),and 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 utiliserdot notation pour appeleruser.first_name; et obtenir une chaîne, mais si nous voulons accéder au nom complet, nous devons le faire en appeleruser.full_name(); car c'est une fonction.

Les objets JavaScript ne peuvent exister que dans le langage JavaScript. Par conséquent, lorsque vous travaillez avec des données auxquelles différents langages doivent accéder, il est préférable d’opter pour JSON.

Accéder 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 JSONsammy: 

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

Pour accéder à l’une des valeurs, nous utiliserons une notation par points ressemblant à ceci: 

sammy.first_name
sammy.last_name
sammy.online

La variablesammy est la première, suivie 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_name dans une pop-up, nous pouvons le faire en appelant la fonction JavaScriptalert(): 

alert(sammy.first_name);
OutputSammy

Ici, nous avons appelé avec succès la valeur associée à la cléfirst_name à partir de l'objet JSONsammy.

Nous pouvons également utiliser la syntaxe entre crochets pour accéder aux données JSON. Pour ce faire, nous garderions la clé entre guillemets doubles entre crochets. Pour notre variablesammy ci-dessus, l'utilisation de la syntaxe entre crochets dans une fonctionalert() ressemble à ceci: 

alert(sammy["online"]);
Outputtrue

Lorsque vous travaillez avecnested array elements, 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" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

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

alert(user_profile.social_media[1].description);
Outputfacebook

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

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

Fonctions pour travailler avec JSON

Cette section examinera deux méthodes de conversion et d’analyse de JSON. Pouvoir convertir JSON d'un objet à une chaîne et inversement est utile pour transférer et stocker des données.

JSON.stringify()

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

Les chaînes sont utiles pour transporter des données d'un client à un serveur en stockant ou en transmettant des informations de manière légère. Par exemple, vous pouvez collecter 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éthodeJSON.parse() et travailler avec les données si nécessaire.

Nous examinerons un objet JSON que nous attribuons à la variableobj, puis nous le convertirons en utilisantJSON.stringify() en passantobj à la fonction. Nous pouvons affecter cette chaîne à la variables: 

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

Maintenant, si nous travaillons avecs, 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 fonctionJSON.stringify() nous permet de convertir des objets en chaînes. Pour faire le contraire, nous allons regarder la fonctionJSON.parse().

JSON.parse()

Les chaînes sont utiles pour le transport, mais vous voudrez pouvoir les reconvertir en objet JSON côté client et / ou côté serveur. Bien que vous puissiez convertir du texte en objet avec la fonctioneval(), ce n’est pas très sûr, nous allons donc utiliser la fonctionJSON.parse() à la place.

Pour convertir l'exemple de la sectionJSON.stringify() ci-dessus, nous passerions la chaînes à la fonction, et l'affecterions à une nouvelle variable: 

var o = JSON.parse(s)

Ensuite, nous aurions l'objeto avec lequel travailler, qui serait identique à l'objetobj.

Pour approfondir, considérons un exemple deJSON.parse() dans le contexte d'un fichier HTML: 












OutputName: Sammy Shark
Location: Ocean

Dans le contexte d'un fichier HTML, nous pouvons voir comment la chaîne JSONs est convertie en un objet récupérable lors du rendu final de la page paraccessing the 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 dispose de nombreuses implémentations disponibles pour une utilisation dans de nombreux langages de programmation courants. Si vous souhaitez utiliser le format dans une autre langue de programmation, consultez le support technique complet sur le site «http://www.json.org/[Introducing JSON]».

Parce qu'il est léger et est facilement transféré entre les langages de programmation et les systèmes, JSON a connu une prise en charge accrue dans les API, y compris lesTwitter API.

Vous ne créerez probablement pas vos propres fichiers.json, mais vous les procurerez à d’autres sources. Vous pouvez consulter cesresources pour en savoir plus sur la conversion d'autres structures de données en JSON.

Related