Les fichiers au format JSON (JavaScript Object Notation) permettent de représenter des informations structurées.
Par exemple :
{
"Employés": [
{ "Prénom":"John" , "Nom":"Doe" },
{ "Prénom":"Anna" , "Nom":"Smith" },
{ "Prénom":"Peter" , "Nom":"Jones" }
]
}
Ce qui équivaut à :
<Employés Prénom="John" Nom="Doe">
<Employés Prénom="Anna" Nom="Smith">
<Employés Prénom="Peter" Nom="Jones">
Pour accéder à des données JSON, vous utiliserez la fonction $.getJSON() :
$.getJSON(URL,function(données){
// Une ou plusieurs instructions pour traiter les données lues
});
Saisissez ces données dans NotePad++ et sauvegardez-les dans le fichier employes.json :
{
"Prenom":"John",
"Nom":"Doe",
"Age":"25"
}
Nous allons accéder à ce fichier en jQuery et exploiter les données qui le composent. Voici le résultat attendu :
Et voici le fichier HTML5/jQuery utilisé :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lecture et parsing d'un fichier JSON</title>
<style>
#zone {
width: 300px;
height: 315px;
border-style: solid;
border-width: 3px;
border-color: black;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<h2>Lecture et parsing du fichier employes.json</h2>
<button id="lecture">Lancer la lecture</button>
<div id="zone"></div>
<script>
$(function() {
$('#lecture').on('click', function(){
$.getJSON('employes.json',function(data){
$('#zone').append('Prénom : ' + data.Prenom + '<br>');
$('#zone').append('Nom : ' + data.Nom + '<br>');
$('#zone').append('Age : ' + data.Age + '<br>');
});
});
});
</script>
</body>
</html>
L’extraction (aussi appelée parsing) des données se fait dans la fonction callback :
$.getJSON('employes.json',function(data){
$('#zone').append('Prénom : ' + data.Prenom + '<br>');
$('#zone').append('Nom : ' + data.Nom + '<br>');
$('#zone').append('Age : ' + data.Age + '<br>');
});
La structure du fichier JSON pris en exemple est ultra simple. Pour accéder à ses différentes composantes, on utilise le paramètre de la fonction callback, suffixé par le nom des différents champs à accéder :
data.Prenom
data.Nom
data.Age
Exercice :
Créez le fichier employes2.json :
[
{ "Prenom":"John" , "Nom":"Doe", "Age":"25" },
{ "Prenom":"Anna" , "Nom":"Smith", "Age":"34" },
{ "Prenom":"Peter" , "Nom":"Jones", "Age":"17" }
]
Modifiez le code jQuery pour afficher toutes les données de ce fichier JSON. Pour cela, vous parcourrez les données retournées par la fonction $.getJSON() en utilisant la fonction $.each() dont voici la syntaxe :
$.each(données à examiner, function(index, données extraites){
// Instructions pour examiner les données extraites
});
Solution :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lecture et parsing d'un fichier JSON</title>
<style>
#zone {
width: 300px;
height: 315px;
border-style: solid;
border-width: 3px;
border-color: black;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<h2>Lecture et parsing du fichier employes.json</h2>
<button id="lecture">Lancer la lecture</button>
<div id="zone"></div>
<script>
$(function() {
$('#lecture').on('click', function(){
$.getJSON('employes2.json',function(data){
$.each(data,function(index,d){
$('#zone').append('Prénom : ' + d.Prenom + '<br>');
$('#zone').append('Nom : ' + d.Nom + '<br>');
$('#zone').append('Age : ' + d.Age + '<br><br>');
});
});
});
});
</script>
</body>
</html>
La fonction callback de $.getJSON() obtient la totalité des données du fichier JSON. La boucle $.each() porte sur les données extraites par $.getJSON(). Sa fonction callback va s’intéresser individuellement à chaque enregistrements, ici représentés par la lettre “d” :
$.getJSON('employes2.json',function(data){
$.each(data,function(index,d){
Pour extraire les données d’un enregistrement, il suffit de passer par “d” et de le suffixer par le nom des champs concernés : Prenom, Nom et Age :
$('#zone').append('Prénom : ' + d.Prenom + '<br>');
$('#zone').append('Nom : ' + d.Nom + '<br>');
$('#zone').append('Age : ' + d.Age + '<br><br>');
Voici le résultat :
