Introduction à JSON

Le format JSON, ou JavaScript Object Notation, est un format simple d'échange de données constitué de paires nom,valeur. Ce format a de particulier sa grande simplicité, et la facilité avec laquelle il s'intègre à du code JavaScript. On doit ce format à Douglas Crockford.

Un exemple de d'objet JSON serait :

var exemple = {
   "cours" : {
      "sigle" : "420KEF",
      "nom" : "Élaboration d'applications dans un environnement graphique"
   },
   "prof" : "Votre chic prof"
};

Il est possible de manipuler un tel objet un peu comme on manipulerait des objets dans d'autres langages conventionnels. Par exemple :

var exemple = {
   "cours" : {
      "sigle" : "420KEF",
      "nom" : "Élaboration d'applications dans un environnement graphique"
   },
   "prof" : "Votre chic prof"
};
// on suppose ici une zone portant l'identifiant "nomDuProf"
document.getElementById("nomDuProf").innerHTML = '<strong>' + exemple.prof + '</strong>';
// on suppose ici une zone portant l'identifiant "sigleDuCours"
document.getElementById("sigleDuCours").innerHTML = '<em>' + exemple.cours.sigle + '</em>';

Dans cet exemple, la variable exemple contient deux attributs : cours et prof. La valeur de prof est "Votre chic prof" alors que la valeur de cours est un objet JSON à part entière. L'accès à un élément d'un objet JSON se fait à l'aide du « . », comme c'est le cas dans bien des langages.

Manipuler du JSON

Outre accéder aux éléments d'un objet JSON directement, comment peut-on manipuler du JSON dont on ne connaît pas la structure a priori?

Explication Code Tester le tout

Afficher du JSON brut donne des résultats mitoyens. Par exemple, le bouton « Brut » à droite affiche le JSON brut de la variable exemple proposée plus haut. Vous verrez que ce n'est probablement pas l'affichage souhaité.

 
alert(exemple);

Afficher du JSON « stringifié », ou transformé en une chaîne de caractères, est plus agréable pour des humains. Par exemple, le bouton « Stringifié » à droite affiche résultat d'une telle transformation sur la variable exemple proposée plus haut.

 
alert(JSON.stringify(exemple));

Il est bien sûr possible pour un « attribut » d'un objet JSON d'être un tableau :

var sessionDePat = {
   cours : [
      { sigle: "420KEF", nom: "Élaboration d'applications dans un environnement graphique" },
      { sigle: "420KH2", nom: "Systèmes temps réel" },
      { sigle: "PIRD",   nom: "Dégagement pour la réussite" }
   ],
   session : "H2014"
};

Créer du JSON dynamiquement

Outre la création statique de JSON, à même le code source, tel que présenté plus haut, il est possible de créer dynamiquement du JSON. Dans les exemples ci-dessous, on supposera que s contient une chaîne de caractères décrivant un objet JSON, par exemple...

var s = "{ nom: 'valeur' }"

...et que nos souhaitons créer un objet JSON nommé jsonObj.

Explication Code

Procéder en évaluant s avec le compilateur JavaScript peut se faire à l'aide de la fonction eval. Ceci peut être dangereux, permettant d'exécuter une chaîne de caractères arbitraire, alors ne faites ceci qu'avec extrême prudence.

Si s est une expression malformée, une exception sera levée.

 
var s = "{nom: 'valeur'};";
eval("var jsonObj = " + s);

Procéder en évaluant s avec un processeur JSON tel que JSON.parse est mieux, car dans ce cas, seul une chaîne décrivant un objet JSON légitime pourra être consommée, alors qu'avec eval, il est possible d'évaluer n'importe quelle chaîne de caractères valide en JavaScript. Notez que ces processeurs ne supportent pas de structures cycliques, comme dans le cas d'un objet a menant vers un objet b qui, lui, mènera vers a.

Si s est une expression malformée, une exception sera levée.

 
var jsonObj = JSON.parse('{"nom" : "valeur"}');
alert(JSON.stringify(jsonObj));

Dans le cas du processeur JSON, il est possible de suppléer un deuxième paramètre à la fonction JSON.parse. Dans ce cas, cette fonction doit accepter deux paramètres, représentant la « clé » et la « valeur ». Le rôle d'une telle fonction est de transformer la valeur.

Puisque la structure des objets JSON permet à un objet JSON de contenir des objets JSON, le traitement des objets JSON est récursif, et la racine a pour clé "". L'usage veut que ce cas retourne la valeur telle quelle.

L'exemple à droite transformera les nombres 1, 2 et 3 en leurs carrés 1, 4 et 9.

 
    var s = '{"carré" : {"un" : 1, "deux" : 2, "trois" : 3}}';
    var jsonObj = JSON.parse(s, function(k,v) {
        if (k === "") {
            return v;
        } else if (typeof(v) == 'number') {
            return v * v;
        } else {
            return v;
        }
    });
    alert(JSON.stringify(jsonObj));

Utilité de JSON

Le format JSON remplace le format XML dans une vaste gamme de cas d'application. Plus simple à manipuler, plus léger, plus près des besoins des programmeuses et des programmeurs, il allège fortement la tâche de développement en comparaison avec la compétition.

Lectures complémentaires

Divers liens pour enrichir le propos.

Pédagogie

Éloges

Outils

Divers

Alternatives

Il existe des alternatives à JSON, outre des formats XML tels que SOAP ou XML-RPC :

Valid XHTML 1.0 Transitional

CSS Valide !