Easy-Micro

ESPACEMEMBRE JavaScript Object Notation
JSON

Format de données textuelles dérivé de la notation des objets du langage JavaScript

Structure

Par définition, JSON est un format d'échange de données (data interchange format inventé par Douglas Crockford, qui continue à maintenir le site officiel JSON.org. Il permet de représenter de l’information structurée comme le permet XML. JSON sert à faire communiquer des applications dans un environnement hétérogène. Un document JSON comprend deux types d'éléments structurels :

  • des ensembles de paires « nom » (alias « clé ») / « valeur »
  • des listes ordonnées de valeurs

Ces mêmes éléments représentent trois types de données :

Exemple de données au format JSON :
{
  "species": "Dog",
  "breed": "Labrador Retriever",
  "age": 6,
  "traits": {
    "eyeColor": "brown",
    "coatColor": "yellow",
    "weight": "137lbs"
  }
}
[Source du code: La-cascade]

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.

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 :
// objet JS; non valide en JSON
let myAnimal = {
  species: "dog",
  breed: "Labrador Retriever",
  age: 6,
  traits: {
    eyeColor: "brown",
    coatColor: "yellow",
    weight: "137lbs"
  }
}

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).

Parser du JSON en Javascript

Vis-à-vis de JavaScript, un document JSON représente un objet, d'où son nom. Il est donc potentiellement plus facile à interpréter qu'un XML qui imposera le recours à des techniques souvent plus lourdes qu'un accès direct, telle que le parcours hiérarchique de l'arbre DOM représenté par le document entier.

Pour convertir vos objets Javascript en une chaîne de caractères (string) JSON valide, vous pouvez utiliser JSON.stringify() :
let myJSON = {
  species: "Dog",
  breed: "Labrador Retriever",
  age: 6,
  traits: {
    eyeColor: "brown",
    coatColor: "yellow",
    weight: "137lbs"
  }
};

let myNewJSON = JSON.stringify(myJSON, null, '\t');

/* output of myNewJSON:
{
  "species": "Dog",
  "breed": "Labrador Retriever",
  "age": 6,
  "traits": {
    "eyeColor": "brown",
    "coatColor": "yellow",
    "weight": "137lbs"
  }
}
*/

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.

À l'inverse, si vous recevez du JSON et que vous voulez l'utiliser dans votre JavaScript, vous pouvez utiliser la méthode JSON.parse() :
let myJSON = '{"species":"Dog","breed":"Labrador Retriever","age":6,"traits":{"eyeColor":"brown","coatColor":"yellow","weight":"137lbs"}}';

let myNewJSON = JSON.parse(myJSON);

// logs a JavaScript object, not a string
console.log(myNewJSON);

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é.

Utiliser JavaScript pour manipuler du JSON

Comme vous l'avez déjà deviné, une fois nos données JSON converties en objet JavaScript, nous pouvons y accéder comme à n'importe quel objet JS. Admettons que nous ayons parsé notre chaîne de caractères JSON et que la variable myNewJSON contienne le résultat, comme nous l'avons vu dans la section précédente. Nous pouvons maintenant utiliser ce qu'on appelle la notation avec point (dot notation) pour accéder aux différentes parties de la donnée JSON :

console.log(myNewJSON.species); // "Dog"
console.log(myNewJSON.breed); // "Labrador Retriever"
console.log(myNewJSON.age); // 6

Nous pouvons également accéder à l'objet imbriqué et aux valeurs situées à l'intérieur via la notation avec point :

console.log(myNewJSON.traits);
/*
[object Object] {
  coatColor: "yellow",
  eyeColor: "brown",
  weight: "137lbs"
}
*/

console.log(myNewJSON.traits.coatColor); // "yellow"
console.log(myNewJSON.traits.eyeColor); // "brown"
console.log(myNewJSON.traits.weight); // "137lbs"

Nous pouvons ensuite faire ce que nous voulons de ces données, par exemple ajouter de nouvelles valeurs, changer les valeurs actuelles, effacer des paires de clés/valeurs...

myNewJSON.age = 7;
delete myNewJSON.traits.weight;
myNewJSON.traits.cuddly = true;

console.log(myNewJSON);

/*
[object Object] {
  age: 7,
  species: "Dog",
  breed: "Labrador Retriever",
  traits: [object Object] {
    coatColor: "yellow",
    cuddly: true,
    eyeColor: "brown"
  }
}
*/

Formation JSON par Easy-Micro Afficher un fichier JSON dans une page HTML

le fichier maliste.json

let myJSON = {
  "species": "Dog",
  "breed": "Labrador Retriever",
  "age": 6,
  "traits": {
    "eyeColor": "brown",
    "coatColor": "yellow",
    "weight": "137lbs"
  }
}
<p>Espèce : <span id="espece"></span><br>
Age : <span id="age"></span><br>
Race : <span id="race"></span></p>
<script src="maliste.json"></script>
<script>
document.getElementById('espece').textContent = myJSON.species;
document.getElementById('age').textContent = myJSON.age;
document.getElementById('race').textContent = myJSON.breed;
</script>

Espèce :
Age :
Race :

Voir aussi les fonctions JSON.parse() et JSON.stringify()


< Page précédente JAVASCRIPT OBJECT NOTATION Page suivante >