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.
Téléchargez le fichier ident.json et ouvrez-le à l'aide d'un éditeur de texte.
Afin de pouvoir utiliser les données contenues dans le fichier JSON, nous devons, au préalable, charger ces données
data=loadJSON("ident.json");
Attention : notre fichier json contient un tableau d'objet (commence par [ et se termine par ])
Modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var tabData;
function preload(){
tabData=loadJSON("ident.json");
}
function setup(){
createCanvas(500,100);
textAlign(CENTER);
text("Le nom de la première personne est : "+tabData[0].nom,250,50);
}
function draw(){
}
Ici aussi nous devons utiliser la fonction "preload" pour charger les données contenues dans le fichier "ident.json".
Comme vous pouvez le constater, dans l'exemple ci-dessus, "tabData" est un tableau d'objet.
Créez un programme permettant d'obtenir ceci :
Il est possible de parcourir le tableau d'objet à l'aide d'une boucle :
Créez un programme permettant d'obtenir ceci (il faudra extraire les données du fichier ident.json et obligatoirement utiliser une boucle).
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.
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) :
Modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
ATTENTION : n'oubliez pas de remplacer les "X" par votre API key
var data;
var desc;
var ville;
var temp;
function preload(){
data=loadJSON("http://api.openweathermap.org/data/2.5/weather?q=bonneville,fr&lang=fr&units=metric&APPID=XXXXXXXXXXXXXXXXX");
}
function setup(){
createCanvas(500,150);
desc=data.weather[0].description;
temp=data.main.temp;
ville=data.name;
d=new Date(data.dt*1000);
textAlign(CENTER);
text("Date et heure du dernier bulletin : "+d.toLocaleString(),250,30);
text("Météo à "+ville+" : ",250,60);
text(desc+", température : "+temp+"°C",250,90);
}
function draw(){
}
Nous utilisons la date et l'heure de diffusion du bulletin au format "timestamp" ("dt"). Pour convertir le format "timestamp" au format "date+heure", nous utilisons un objet de type Date : "d=new Date(data.dt*1000)". La méthode "Date" prend en paramètre la date au format "timestamp". JavaScript utilise un "timestamp" en milliseconde alors que "dt" est en seconde, d'où le "*1000". "d.toLocaleString()" permet d'avoir la date au format français (jj/mm/aaaa).
Reprenez le programme du "À faire vous-même 2.6" en le modifiant pour obtenir la météo dans la ville de votre choix. Vous pouvez aussi afficher plus d'informations.