Autre format de données très courant sur le "web", le JSON (JavaScript Object Notation). Le JSON fonctionne avec un système de paire clé/valeur. Le format JSON, comme son nom l'indique, est dérivé de la notation des objets du JavaScript.

Un objet JavaScript est encadré par des accolades :


{cle_1 : val_1, cle_2 : val_2, cle_3 : val_3}

souvent, pour une question de lisibilité, on écriera :


{
    cle_1 : val_1,
    cle_2 : val_2,
    cle_3 : val_3
}

Un fichier au format JSON peut regrouper un grand nombre d'objets :


[{
    "nom" : "Durand",
    "prenom" : "Jean-Pierre",
    "date_naissance" : "23/05/1985"
},
{
    "nom" : "Dupont",
    "prenom" : "Christophe",
    "date_naissance" : "15/12/1967"
},
{
    "nom" : "Terta",
    "prenom" : "Henry",
    "date_naissance" : "12/06/1978"
}]

Ci-dessus, nous avons un tableau contenant des objets.

La "valeur" d'une paire "clé/valeur" peut être un tableau :


{
    "nom" : "Durand",
    "prenom" : "Jean-Pierre",
    "date_naissance" : "23/05/1985"
    "sport" : ["tennis", "football", "pétanque"]
}

ou même un autre objet :


{
    "nom" : "Durand",
    "prenom" : "Jean-Pierre",
    "date_naissance" : "23/05/1985"
    "adresse" : {"num":6, "rue":"impasse du rossignol", "ville":"Nogent-le-Rotrou", "cp":"28400"}
}

Comme vous pouvez le constater, il est possible d'obtenir des structures de données très complexes avec le format JSON.

Comment utiliser les données présentes dans le fichier JSON ?

Si le fichier JSON contient un seul objet (pour simplifier l'explication, nous "rangerons" cet objet dans une variable) :


var data = {
    "nom" : "Durand",
    "prenom" : "Jean-Pierre",
    "date_naissance" : "23/05/1985"
    "adresse" : {"num":6, "rue":"impasse du rossignol",
    "ville":"Nogent-le-Rotrou", "cp":"28400"}
}

Il suffit d'utiliser la "notation pointée" : "data.nom" permet de récupérer le nom (ici "Durand"), "data.prenom" permet de récupérer le prénom (ici "Jean-Pierre") ou plus compliqué, "data.adresse.rue" sera égal à "impasse du rossignol" dans l'exemple ci-dessus

Si le fichier JSON contient un tableau d'objet :


var tabData=[{
    "nom" : "Durand",
    "prenom" : "Jean-Pierre",
    "date_naissance" : "23/05/1985"
},
{
    "nom" : "Dupont",
    "prenom" : "Christophe",
    "date_naissance" : "15/12/1967"
},
{
    "nom" : "Terta",
    "prenom" : "Henry",
    "date_naissance" : "12/06/1978"
}]

Comme ici, nous avons un tableau contenant des objets, il faudra utiliser la notation habituelle pour les tableaux, suivit de la "notation pointée" :

"tabData[0].nom" renverra "Durand", "tabData[1].prenom" renverra "Christophe"...

Pour en savoir plus sur le JSON, vous pouvez lire l'article sur Wikipédia.

À faire vous-même 2.1

Téléchargez le fichier ident.json et ouvrez-le à l'aide d'un éditeur de texte.

De nombreux sites web proposent des services basés sur des API (Application Programming Interface). Ces sites sont capables de fournir des données aux formats JSON sur "simple demande". Souvent, ces "demandes" sont effectuées par l'intermédiaire d'une url (si vous avez besoin de vous rafraichir la mémoire à propos de la notion d'url, n'hésitez pas à consulter ce document).

Nous allons illustrer ce propos en utilisant l'API d'un site qui fournit des informations météo au format JSON. Vous trouverez ce site à l'adresse suivante : openweathermap.org/api

Pour profiter de ce service, il est nécessaire de s'inscrire (http://home.openweathermap.org/users/sign_up) afin de pouvoir récupérer une clé (API key). Notez bien cette clé quelque part, elle vous servira dès que vous voulez accéder au service.

À faire vous-même 2.1

Ouvrez votre navigateur préféré et copier-coller l'url suivante dans la barre d'url du navigateur :


http://api.openweathermap.org/data/2.5/weather?q=bonneville,fr&lang=fr&units=metric&APPID=XXXXXXXXXXXXX

ATTENTION : il faut remplacer les "X" par la clé (API key) que vous aurez obtenue lors de votre inscription.

Au lieu d'obtenir, comme d'habitude, une page web, vous devriez obtenir uniquement quelque chose qui ressemblera à ceci :


{"coord":{"lon":6.41,"lat":46.08},"weather":[{"id":800,"main":"Clear","description":"ensoleillé","icon":"01d"}],"base":"stations","main":{"temp":17.35,"pressure":1016,"humidity":59,"temp_min":16,"temp_max":19},"visibility":10000,"wind":{"speed":2.1,"deg":250},"clouds":{"all":0},"dt":1443975257,"sys":{"type":1,"id":6002,"message":0.0095,"country":"FR","sunrise":1443937016,"sunset":1443978495},"id":3031679,"name":"Bonneville","cod":200}

Comme les données sont réactualisées relativement souvent, vous n'obtiendrez pas la même chose que moi !

Avec une simple url, le site open weather renvoie des informations météo sous forme de données JSON.

Détaillons l'url :


http://api.openweathermap.org/data/2.5/weather

Cette partie de l'url ne changera pas (sauf si vous désirez autre chose que les conditions météo actuelles, à ce moment-là, il faudra remplacer "weather" par autre chose (consulter le site open weather pour plus d'informations)).


?q=bonneville,fr&lang=fr&units=metric&APPID=XXXXXXXXXXXXX

À partir du point d'interrogation, vous devez renseigner les différents paramètres qui permettront à open weather de vous renvoyer les bonnes informations. Ces paramètres sont séparés par le caractère "&".

Il est possible de construire des requêtes beaucoup plus complexes, encore une fois, veuillez consulter le site open weather pour plus d'informations.

Intéressons-nous maintenant aux données JSON renvoyées (nous n'allons pas tout détailler) :