MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est utilisé habituellement pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web). Comme cette notation est extrêmement courante, cet article a pour but de vous familiariser avec la notation JSON en Javascript, vous apprendre à accéder aux données depuis un objet JSON et écrire vos propres objets JSON.

Prérequis: Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).
Objectif: Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.

Plus sérieusement, qu'est ce que le JSON ?

JSON est un format de données semblable à la syntaxe des objets JavaScript popularisé par Douglas Crockford. Même s'il est basé sur la syntaxe JavaScript, il peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant de lire (parser) et de générer du JSON.

Le JSON se présente sous la forme d'un objet ou d'une chaîne de caractères — la première sera utilisée lorsque vous souhaiterez extraire les données du JSON et la seconde lorsque vous voudrez transférer le JSON sur un réseau. Cette dualité n'est pas un gros souci : Javascript propose un objet global JSON qui dispose de méthodes destinées à assurer la conversion entre les deux.

Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le MIME type application/json.

Structure du JSON

Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal, et c'est généralement la cas. Vous pouvez insérer les mêmes types de données de base à l'intérieur de votre objet JSON de la même manière que vous le faites habituellement pour tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booleans et tout autre objet litteral. Cela vous permet de hiérarchiser vos données tout comme ceci :

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

Si nous chargeons cet objet dans un programme Javascript au sein d'une variable appelée superHeroes par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article Les bases de JavaScript orienté objets à l'aide de la notation point / crochets. Par exemple :

superHeroes.hometown
superHeroes['active']

Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des proprietés et les indexes des tableaux. Par exemple, pour accéder au troisième superpouvoir du second super héro présents dans la liste, vous n'aurez qu'à faire la chose suivante :

superHeroes['members'][1]['powers'][2]
  1. D'abord, nous partons de la variable — superHeroes.
  2. A l'intérieur de laquelle, nous désirons accéder à la propriété members, donc, nous tapons ["members"].
  3. members contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons [1].
  4. A l'intérieur de cet objet, nous souhaitons accéder à la propriété powers, donc, nous utilistons ["powers"].
  5. Enfin, à l'intérieur de cette propriété powers nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héro. Nous désirons obtenir le troisième, donc nous tapons [2].

Note: L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

Des tableaux en tant que JSON

Un peu plus haut, nous avons dit "Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal, et c'est généralement la cas." — la raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : [0]["powers"][0].

Notes diverses

  • Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes.
  • La notation JSON nécessite l'usage des guillemets pour être valide. Il est préférable d'utiliser des guillemets et non les apostrophes.
  • Une simple virgule ou un double point mal placé peut rendre votre objet JSON invalide. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme JSONLint pour valider votre code JSON.
  • Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans un objet JSON. Ainsi, par exemple, une simple chaîne de caractère ou un nombre serait un objet JSON valide. Remarquez à quel point ce pourrait être utile...
  • Contrairement au Javascript dans lequel les identifiants peuvent être utilisés comme des propriétés, en JSON, seules les chaînes de caractères peuvent être utilisées en tant que propriétés.

Activité : Manipuler le JSON au travers d'un exemple

Allez ! Un petit exemple pour voir comment nous pouvons nous servir du JSON sur un site web.

Lançons nous

Pour commencer, faites une copie locale de nos fichiers heroes.html et style.css. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :

<header>
</header>

<section>
</section>

Nous trouvons également un élément <script> dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments <header> et <section> pour les stocker dans des variables :

var header = document.querySelector('header');
var section = document.querySelector('section');

Nos données JSON sont disponibles sur notre GitHub ici : https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

Chargeons notre JSON

Pour charger nos données JSON, nous allons utiliser l'API XMLHttpRequest (qu'on appelle plus couramment XHR). Il s'agit d'un objet extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour le contenu de notre page sans avoir à la recharger entièrement et introduit le concept de pages web adaptatives. Même si c'est très tentant, ça dépasse largement le sujet de cet article pour être expliqué plus en détail.

  1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Pour ce faire, ajouter la ligne suivante à votre code Javascript :
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
  2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :
    var request = new XMLHttpRequest();
  3. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante :
    request.open('GET', requestURL);

    Cette méthode prend au moins deux paramètres — il y a d'autre paramètres optionnels disponibles. Nous n'en avons cependant besoin que de deux pour notre exemple :

    • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, GET est appropriée dans la mesure où nous voulons simplement récuperer quelques données.
    • L'URL où adresser notre requête — il s'agit de l'URL de notre fichier JSON dont nous parlions tout à l'heure.
  4. Ensuite, ajoutez les deux lignes suivantes — ici, nous fixons à la valeur JSON le responseType, ce qui signifie que notre serveur saura que nous nous attendons à recevoir un objet JSON en retour. Puis, nous envoyons notre requête à l'aide de la méthode send() :
    request.responseType = 'json';
    request.send();
  5. La dernière partie de cette section correspond au moment où le serveur répondra et où nous traiterons la réponse. Ajoutez les lignes suivantes à la fin de votre code :
    request.onload = function() {
      var superHeroes = request.response;
      populateHeader(superHeroes);
      showHeroes(superHeroes);
    }

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra donc nos données JSON ! Nous passerons ensuite ce JSON à deux fonctions — la première remplira le <header> avec les données correspondantes et la seconde créera une carte d'identité pour chaque héro de l'équipe et l'ajoutera dans la <section>.

Nous avons encapsulé ce code dans un écouteur d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.

Remplissage de l'en-tête

Maintenant que nous avons récupéré nos données JSON, il est temps d'écrire les deux fonctions que nous évoquions ci dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :

function populateHeader(jsonObj) {
  var myH1 = document.createElement('h1');
  myH1.textContent = jsonObj['squadName'];
  header.appendChild(myH1);

  var myPara = document.createElement('p');
  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
  header.appendChild(myPara);
}

Nous avons appelé le paramètre de cette fonction jsonObj, c'est donc ainsi que nous aurons accès à notre objet JSON. Ici, nous créons tout d'abord un élément <h1> à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet JSON, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété correspondante dans le JSON.

Creating the hero information cards

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

function showHeroes(jsonObj) {
  var heroes = jsonObj['members'];
      
  for (var i = 0; i < heroes.length; i++) {
    var myArticle = document.createElement('article');
    var myH2 = document.createElement('h2');
    var myPara1 = document.createElement('p');
    var myPara2 = document.createElement('p');
    var myPara3 = document.createElement('p');
    var myList = document.createElement('ul');

    myH2.textContent = heroes[i].name;
    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
    myPara2.textContent = 'Age: ' + heroes[i].age;
    myPara3.textContent = 'Superpowers:';
        
    var superPowers = heroes[i].powers;
    for (var j = 0; j < superPowers.length; j++) {
      var listItem = document.createElement('li');
      listItem.textContent = superPowers[j];
      myList.appendChild(listItem);
    }

    myArticle.appendChild(myH2);
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    myArticle.appendChild(myList);

    section.appendChild(myArticle);
  }
}

To start with, we store the members property of the JSON in a new variable. This array contains multiple objects that contain the information for each hero.

Next, we use a for loop to loop through each object in the array. For each one, we:

  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
  2. Set the <h2> to contain the current hero's name.
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
  4. Store the powers property in another new variable called superPowers — this contains an array that lists the current hero's superpowers.
  5. Use another for loop to loop through the current hero's superpowers — for each one we create a <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

Note: If you are having trouble following the dot/bracket notation we are using to access the JSON, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

Converting between objects and text

The above example was simple in terms of accessing the JSON, because we set the XHR to return the response already in JSON format, using:

request.responseType = 'json';

But sometimes we aren't so lucky — sometimes we'll receive some JSON data formatted as a text string, and we'll want to convert it to an object. And when we want to send JSON data as some kind of message, we'll often need to convert it to a string for it to work correctly. Luckily, these two problems are so common in web development that a built-in JSON object was added to browsers quite a while ago, containing the following two methods:

  • parse(): Accepts a JSON object in text string form as a parameter, and returns the corresponding object.
  • stringify(): Accepts a JSON object as a parameter, and returns the equivalent text string form.

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the JSON as text, then used parse() to convert it to an actual JSON object. The key snippet of code is here:

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

var myJSON = { "name": "Chris", "age": "38" };
myJSON
var myString = JSON.stringify(myJSON);
myString

Here we're creating a JSON object, then checking what it contains, then converting it to a string using stringify() — saving the return value in a new variable — then checking it again.

Summary

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

See also

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : darthyoh
 Dernière mise à jour par : darthyoh,