Médiaforma

jQuery – Charger des données JSON

Print Friendly

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 :

 

 

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply