Pourquoi ce format ?

A common use of JSON is to read data from a web server, and display the data in a web page.

La communication - échange de demandes et réponses, "analysables" - entre un serveur et un navigateur se fait uniquement en mode texte.

Un navigateur peut recevoir du serveur des fichiers binaires (images, sons, video, ...) et peut aussi envoyer des fichiers binaires - via un formulaire (<input type="file" ... />), mais ces fichiers sont des réponses "brutes".

Les fichiers texte envoyés au navigateur peuvent être sans format (.txt), en HTML (.htm), en CSS (.css), en JavaScript (.js), en XML (.xml) et ... en JSON (.json)

JSON est un format texte dédié à l'échange de données, comme le XML mais en moins lourd.

En XML, il faut toujours fermer la balise.
Le JSON permet une écriture plus dense.

Clé : valeur

Un objet JSON représente un tableau ou une collection de couples clé : valeur

Une clé est une chaîne de caractères unique entourée par des guillemets (")

Contrairement à la notation JSON, la clé d'un objet JS peut aussi être entouré par des apostrophes. Si elle n'est pas entourée, la chaîne doit ne doit pas contenir d'espace, de trait d'union, de caractères spéciaux, ...

Chaque clé est suivie de : (deux-points) suivi d'une valeur.

Chaque couple est séparée par , (virgule)

Le dernier couple peut être suivi d'une virgule (inutile).

Une valeur est :

une chaîne de caractères (entourée de guillemets)
un nombre (en notation décimale. Avec point décimal, s'il est réel)
true ou false
null
un objet (au format JSON)
un tableau (au format JSON)

Une chaîne de caractères

Une chaîne de caractères doit être entourée de "(guillemets).
=> Elle ne peut pas contenir de " (guillemets).
Le caractère d'échappement est \.

\" : permet d'échapper le caractère :
\\ : permet d'échapper le caractère \
\n : permet d'insérer une nouvelle ligne
\t : permet d'insérer une tabulation
...

Format JSON

JSON permet de stocker des objets particuliers :

des collections de couples clé : valeur.

Dans ce cas, l'objet commence par {et se termine par }

La valeur peut aussi être un objet, un tableau ...

Pour plus de lisibilité, on peut placer des espaces ou des retours à la ligne, après ou avant les crochets, double-points et virgules.

Exemples :
```
{ "nom" : "PIGNÉ" , "prenom" : "Thibaut" }
```
```
{"nom":"PIGNÉ","prenom":"Thibaut"}
```
```
{       "nom": "PIGNÉ"            , "prenom"      :"Thibaut" }
```
```
{
  "nom":"PIGNÉ",
  "prenom":"Thibaut"
}
```
Un objet "tordu" :
```
{
  "tableau1" : [ 12, 12.50, 13, 13.50 ],
  "nom"      : "PIGNÉ",
  "tableau2" : [ "Jean", "Thibaut", "Marie", "Monique" ],
  "pi"       : 3.1415926535,
  "booleen1" : true,
  "booleen2" : false,
  "saitPas"  : null,
  "objet"    : {"nom":"PIGNÉ","prenom":"Thibaut"}
}
```
Cet objet contient 8 couples de clé : valeur. Toutes les clés sont bien des chaînes de caractères uniques. Les valeurs sont un tableau, une chaîne de caractères, un autre tableau, un nombre, un booléen, un second booléen, un null, un objet.
des tableaux

Dans ce cas, l'objet commence par [et se termine par ]
Chaque valeur du tableau est séparée par , (virgule).

La valeur peut aussi être un objet, un tableau ...

Exemple :
```
[ "Jean", "Thibaut", "Marie", "Monique" ]
```
```
[ 12, 12.50, 13, 13.50 ]
```
```
[ true, false,                 false, true     ]
```
```
[ 12,
  12.50,
  13,
  13.50
]
```
Un tableau "tordu" :
```
[
  [ 12, 12.50, 13, 13.50 ]           ,
  "Le restaurant \"La bonne table\" ",
  {"nom":"PIGNÉ","prenom":"Thibaut"} ,
  null                               ,
  "ligne1\nligne2"
]
```
Ce tableau contient 4 éléments : un autre tableau, une chaîne de caractères, un objet JSON, un null et une seconde chaîne de caractères. On constate aussi que la première chaîne de caractères contient deux guillemets échappés. La seconde contient un retour à la ligne.

.stringify() .parse()

JavaScript dispose d'une classe JSON.

Comme pour la classe Math, seules ses méthodes sont utilisables.

Les méthodes de la classe JSON :

JSON.stringify() : pour convertir une valeur JavaScript en chaîne JSON.
JSON.parse() : pour convertir une chaîne JSON en valeur JavaScript.

Une chaîne JSON est une simple chaîne de caractères mais formatée de façon particulière.

Exemple 1

var moi = { nom          : "PIGNÉ" , prenom            : "Thibaut" };   // Objet JavaScript. Clés sans guillemets
alert(moi.prenom); // affiche la propriété prenom de l'objet moi

var moiChaineJSON = JSON.stringify(moi); // conversion en chaîne JSON. Clés entourées de guillemets
alert(moiChaineJSON); // affichage de la chaîne JSON

var moi2 = JSON.parse(moiChaineJSON); // conversion en objet JavaScript
alert (moi2.prenom); // affiche la propriété prenom de l'objet moi2

JSON ne présente aucun avantage lorsque les données sont dans le script lui-même.
N'oubliez pas que JSON est dédié à l'échange de données.

Exemple 2

  var myObj, myJSON, text, obj;

  //Storing data:
  myObj = { "name":"John", "age":31, "city":"New York" };
  myJSON = JSON.stringify(myObj);
  localStorage.setItem("testJSON", myJSON);

  //Retrieving data:
  text = localStorage.getItem("testJSON");
  obj = JSON.parse(text);
  alert(obj.name);

Octobre 2017 : Les navigateurs de Microsoft (Edge 38.14393 et IE 11.1770) ne supportent pas le localStorage.

Exemple 3

Via un fichier .json stocké sur un serveur, on peut mettre à jour une partie de la page web et afficher un tableau en fonction du choix de l'utilisateur dans une liste déroulante
Voir : html_table_dynamic

Divers

Extension du fichier : .json
Type MIME : application/json

Liens

JSON de json.org (en français)
JSON - Introduction de w3schools.com (en anglais)