Exploiter des donnés json

Dernière mise à jour le par @karamel .

introduction

dans ce tutoriel on vas en première partie parcourir les technique permettant de travailler avec des donné json et pour finir on verra comment interoger une api rest afin de traiter et afficher les donné dans une page html.

Le format json

Le format json imaginé par Douglas Crockford gourou du Javascript utilise la syntaxe d' objet JavaScript et même si il s'apparente a un objet JavaScript et partage certaines de ces méthode ce n'en est pas un, json est considéré comme un format d’échange de donné simple et textuelle.La specification et la syntaxe officiel est accessible sur le site officiel

La syntaxe

Un fichier json utilise des couples clé valeur sépare par les deux point et un couple est délimité par une virgule. Afin d'etre accessible les donné json sont placé dans une variable.

La clé est une chaine de caractère elle est donc entre guillemet (guillemet double)quand a la valeur elle peut être une chaîne de caractères ,un nombre, un tableau, true, false, null, un objet.

 var un_objet={"nom" : "Johnnny","age" : 60,"maison" : true,"enfant" : ["riri","fifi","loulou"]};

Pour une meilleur lisibilité on ajoute un saut de ligne entre chaque paire

 var un_objet={
   "nom" : "Johnnny",
   "age" : 60,
   "maison" : true,
   "enfant" : ["riri","fifi","loulou"]
 };

connaitre la valeur d'une clé

Une valeur peut être récupérer en précisant d'abord le nom de l'objet puis le nom de la clé avec deux syntaxe possible dans ce cas le nom de la clé doit être connue

La première syntaxe consiste a utilisé la syntaxe JavaScript pour appeler la valeur d'un attribut dans un objet.

On précise d'abord le nom de la variable contenant l’objet suivit du point comme délimiteur suivit de la clé.


var un_objet={"nom":"Johnnny", "age":60};

var la_valeur = un_objet.nom;   // retourne Johnnny

La deuxième syntaxe consiste a englober le nom de la clé a l’intérieur des crochet la clé sera considérer comme un chaine de caractère le nom de la clé sera donc délimiter par des guillemet


var un_objet={"nom":"Johnnny", "age":60};
var la_valeur = un_objet['nom'];   // retourne Johnnny

Utilisation de for in

Récupérer le nom des clees

On a la possibilité de récupérer toutes les clé en même temps en utilisant une boucle for in

var un_objet = {"nom":"mimi", "age":30, "voiture":null};
 
 for (var nom_clee in un_objet){
 
  console.log(nom_clee);

 }

Récupérer toutes les valeurs

En modifiant le script du fait que l'on connait le nom des clee on vas pouvoir récupéré toute les valeurs en utilisant la syntaxe utilisé pour connaitre un valeur en fonction de la cle mais comme les clé retourné par for in sont de type string seul la syntaxe avec les crochet est possible.

var un_objet = {"nom":"mimi ", "age":30, "voiture":null};

for (var nom_clee in un_objet) {

  console.log(un_objet[nom_clee])     //renvoi mimi 30 null
}

Connaitre l’existence d'une clé

Pour savoir si une clé existe il suffit simplement d'utiliser une condition "if"


var un_objet = {"nom":"Johnny", "age":30, "voiture":null};

if (un_objet.nom) {

  document.getElementById("demo").innerHTML += un_objet.name + "<br>"; //comme la clé existe renvoi Johnny
  
}

Recuperer le nom des clee dans un tableau Object.keys

Object.keys permet de récupérer un tableau (array) contenant le nom de toute les clé avec comme paramètre l'objet cible.


var un_objet={"nom":"Johnnny", "age":60};

var tb_clee=Object.keys(un_objet)

console.log(tb_clee.length); //  2
console.log(tb_clee);   //  Array ["nom", "age"]

En parcourant le tableau avec une boucle for on peut obtenir les valeurs de la meme facon qu' avec for in


var un_objet={
"nom":"Johnnny",
"age":60,
"voiture":null
};

var tb_clee=Object.keys(un_objet)

for (var i=0; i< tb_clee.length; i++) {

console.log(un_objet[tb_clee[i]]);

}

Recuperer les valeurs dans un tableau Object.values

Object.values permet de récupérer un tableau (array) contenant le nom de toute les valeurs avec comme paramètre l'objet cible.


var un_objet={"nom":"Johnnny", "age":60};

var tb_valeurs=Object.values(un_objet)

console.log(tb_valeurs.length); //  2
console.log(tb_valeurs); //  Array ["Johnnny", "60"]

Supprimer une clé (delete)

Afin de supprimer une clees on utilise "delete"

var un_objet = {"nom":"mimi","age":30,"voiture":false}

for (i in un_objet) {
  console.log(i)
}

console.log("---------------------")

delete un_objet.age;

for (i in un_objet) {
  console.log(i)
}

Les tableaux d'objet

Syntaxe

Un array est considéré comme une donné json valide et un tableaux d'objet est un array contenant des objet la syntaxe est tres utilisé.

var tableau_objet = [{
 "nom": "Guadeloupe",
 "code": "01"
}, {
 "nom": "Martinique",
 "code": "02"
}, {
 "nom": "Guyane",
 "code": "03"
}]

cela permet par exemple de remplir un tableau html.

Trier un tableau d'objet

La méthode short de l'ojet array permet de trier un tableau et permet aussi de trier les objet contenu dans un tableau en fonction d'une des clé de chaque objet en considerant que chaques objet contient un nom de clé commune, le trie se fera en fonction de la valeur de la clé.

var tableau_objet = [{
 
 "nom": "Martinique",
 "code": "02"
}, {
 "nom": "Guyane",
 "code": "03"
}, {
"nom": "Guadeloupe",
 "code": "01"
}]

   tableau_objet.sort(function(key1,key2){return key2.nom > key1.nom;} )
   console.log(tableau_objet)

Importer exporter des donné json

Importer (JSON.parse())

Dans certains car comme lors d'une requête ajax les donné json peuvent être reçu sous forme de chaine de caractère et pour etre reconnu comme donné json elle doivent être formaté en utilisant json.parse()

var un_objet='{"nom" : "Johnnny","age" : 60,"maison" : true,"enfant" : ["riri","fifi","loulou"]}';
 
 console.log(un_objet)

un_objet=JSON.parse(un_objet)

 console.log(un_objet)

exporter (JSON.stringify())

A l'inverse si on désire envoyer des donné json elles doit être transformé en chaine de caractère et la on utilise JSON.stringify()

var un_objet={
    "nom" : "Johnnny",
    "age" : 60,
    "maison" : true,
    "enfant" : ["riri","fifi","loulou"]
  };
  
 console.log(un_objet)

 un_objet=JSON.stringify(un_objet)

 console.log(un_objet)

code teste

afin de tester les exemples voici le code teste le resulta de chaque exemple est affiché dans la console et pour les non initié pour l'afficher avec firefox on l'affiche en allant dans l'onglet outils puis le menu developpement web.

<!doctype html>
 <html lang="fr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head>
 <style type="text/css">

 body{
  font-family:Verdana, Geneva, sans-serif;
  background-color:#b2bdc6;
 }

 </style>
 <script>

function valeur(){

var un_objet={"nom":"Johnnny", "age":60};

var la_valeur = un_objet.nom;   // retourne Johnnny

console.log(la_valeur);

la_valeur = un_objet['nom'];   // retourne Johnnny

console.log(la_valeur);
}

function for_in(){

 var un_objet = {"nom":"mimi", "age":30, "voiture":null};
 
 for (var nom_clee in un_objet){
 
  console.log(nom_clee);

 }
}


function for_in_val(){

var un_objet = {"nom":"mimi ", "age":30, "voiture":null};

for (var nom_clee in un_objet) {

  console.log(un_objet[nom_clee])     //renvoi mimi 30 null
}
}

function intero(){

 var un_objet = {"nom":"Johnny", "age":30, "voiture":null};

 if (un_objet.nom) {

   console.log(un_objet.nom);
    
 }
}

function for_in_tab(){

 var un_objet = [{
 "nom": "John",
 "age": 40,
 "car": null,
   "enfant" : ["riri","fifi","loulou"]
}, {
 "nom": "nono",
 "age": 30,
 "car": null,
   "enfant" : ["toto","titi","minet"]
}];
 
 for (var x =0; x< un_objet.length;x++){
 
 for (var y in un_objet[x]){
 
  console.log(y);
  
  console.log(un_objet[x][y]);
  
  }
 }
}

function supprime() {

 var un_objet = {"nom":"mimi","age":30,"voiture":false}

for (i in un_objet) {
  console.log(i)
}

console.log("---------------------")

delete un_objet.age;

for (i in un_objet) {
  console.log(i)
}
}


function trie() {

var tableau_objet = [{
 
 "nom": "Martinique",
 "code": "02"
}, {
 "nom": "Guyane",
 "code": "03"
}, {
"nom": "Guadeloupe",
 "code": "01"
}]

 tableau_objet.sort(function(key1,key2){return key2.nom > key1.nom;} )
   console.log(tableau_objet)
}

 
function obj_key(){

 var un_objet = {"nom":"John",
 "age":30,
 "voiture":null,
 nom:"nono",
 age:30
 };

 var tb_clee=Object.keys(un_objet)

 console.log(tb_clee);

 for(var i=0;i<tb_clee.length;i++){

  console.log(tb_clee[i]);
  
  console.log(un_objet[tb_clee[i]]);
 }
}

function parsse(){

 var un_objet='{"nom" : "Johnnny","age" : 60,"maison" : true,"enfant" : ["riri","fifi","loulou"]}';
  
 console.log(un_objet)

 un_objet=JSON.parse(un_objet)

 console.log(un_objet)

}

function stringi(){

 var un_objet={
    "nom" : "Johnnny",
    "age" : 60,
    "maison" : true,
    "enfant" : ["riri","fifi","loulou"]
  };
  
 console.log(un_objet)

 un_objet=JSON.stringify(un_objet)

 console.log(un_objet)

}

function dispache(expr){

console.clear()

switch (expr) {

case 'valeur':

document.getElementById("sources").value=valeur.toString()
valeur()

 break;
case 'obj_key':

document.getElementById("sources").value=obj_key.toString()
obj_key()

 break;
case 'for_in':

document.getElementById("sources").value=for_in.toString()
for_in()

 break;
case 'for_in_val':

document.getElementById("sources").value=for_in_val.toString()
for_in_val()

 break;
case 'intero':

document.getElementById("sources").value=intero.toString()
intero()

 break;
case 'for_in_tab':

document.getElementById("sources").value=for_in_tab.toString()
for_in_tab()

 break;
case 'supprime':

document.getElementById("sources").value=supprime.toString()
supprime()

 break;
case 'trie':

document.getElementById("sources").value=trie.toString()
trie()

 break;
case 'parsse':

document.getElementById("sources").value=parsse.toString()
parsse()

 break;
case 'stringi':

document.getElementById("sources").value=stringi.toString()
stringi()

 break;

}
}

</script>

 
 </script>
 </head>
 <body>

 <br>
 
 <button onclick="dispache('valeur')">valeur simple</button>
 
 <button onclick="dispache('for_in')">for in clee</button>

 <button onclick="dispache('for_in_val')">for in valeur</button>

 <button onclick="dispache('for_in_tab')">for in avec tableau</button>
 
 <button onclick="dispache('supprime')">supprimer</button>
 
 <button onclick="dispache('trie')">trie (short)</button>
 
 <button onclick="dispache('intero')">interogation</button>
 
 <button onclick="dispache('obj_key')">obj.key</button>
 
 <button onclick="dispache('parsse')">parse</button>
 
 <button onclick="dispache('stringi')">stringify</button>
 <br>
 
 <textarea id="sources" style="overflow: auto;;height:250px;width:70%;font-size:14px"></textarea>
 <span id="demo"></span>
 
 </body>
 </html>

interrogation d'une api rest et affichage des donné

Une api rest renvoi l'adresse d'un fichier de donné généralement formaté en json en utilisant une requête ajax.

format de l'adresse

Les donné recu dépendent d'une syntaxe definit dans l'adresse fourni a la requete la syntaxe est toujour documenté sur le site officiel de l'api il est donc imperatf de la lire. C'est l'api rattaché au serveur qui s'occupe degénérer les donné json en fonction de l'adresse reçu.

Dans ce qui va suivre on vas interroger l'api du site https://geo.api.gouv.fr le choix de ce site c'est fait car l'api est asser simple a comprendre, on a pas besoin de s'inscrire pour en profiter et elle fourni des donnés gouvernemental.

On vas de récupère les villes d'un département et pour ce faire on vas créer une requête ajax afin de récupérer le fichier json que l'on traitera avec JavaScript afin d'afficher les donné dans un tableau html.

Pour afficher les ville d'un département il suffit de préciser dans l'adresse le mot département suivit de l'indicatif du département et on termine par le mot commune ce qui donne pour le département 76 correspondant a la seine maritime.

https://geo.api.gouv.fr/departements/76/communes

format des donné json

Avant de faire quoi que ce soit il faut comprendre comment est formaté le fichier json reçu.

En rentrant l'adresse dans la barre d'un navigateur on obtient la visualisation du fichier en donné brute peut lisible je conseille l'utilisation de firefox qui formate le fichier le rendant lisible, n'ayant pas chrome je ne peut dire pas si les donné sont formaté pour edge et vivaldi les donné restes brute.

En réduisant a deux commune voila ce que ca donne

[
  {
    "nom": "Allouville-Bellefosse",
    "code": "76001",
    "codeDepartement": "76",
    "codeRegion": "28",
    "codesPostaux": [
      "76190"
    ],
    "population": 1157
  },
  {
    "nom": "Alvimare",
    "code": "76002",
    "codeDepartement": "76",
    "codeRegion": "28",
    "codesPostaux": [
      "76640"
    ],
    "population": 620
  }
  ]

On a un tableau contenant pour chaque index un objet comprenant le nom de la commune son code administratif,son code départementale, son code région ces codes postaux imbriqué dans un tableau et la population. L’ensemble des objets étant trier par ordre alphabétique du nom des commune.

Pour la suite on n'affichera que les communes ainsi que leurs code postal leurs population le tout trier en fonction des communes les plus peuple on y ajoutera un chiffre correspondant a leurs rang et pour finir on affichera dans un input le nombre de personnes vivant dans le département a partir d'une variable qui sera incrementé par la valeur de la clé population pour toutes les communes.

On fixera la limite des communes affiché a celles ayant plus de 3000 habitant et on donnera la possibilité de choisir le département a afficher par l'intermediaire d'une balise input de type text.

Le code html

<body>
 
 <button onclick="rest()">api rest</button>
 <input type ="text" id="departement" placeholder="numero departement"/>
 <br>
 <input type ="text"  id='popu_globale'/>
 
 <table>
    <thead>
        <tr>
            <th>ville</th>
   <th>classement</th>
   <th>code postaux</th>
   <th>population</th>
        </tr>
    </thead>
    <tbody id="rendu">
        
    </tbody>
</table>

</body>

Effectuer la requete

comme toutes requêtes ajax la requête s'effectue en utilisant XMLHttpRequest() elle sera en Get.

function rest(){

 var département=document.getElementById('departement').value
 
 var adresse='https://geo.api.gouv.fr/departements/'+departement+'/communes'

 httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = gestion_requete;
    httpRequest.open('GET', adresse);
    httpRequest.send();

}

Le code récupere la valeur du département qui est placé dans une balise html input de type texte

<input type ="text" id="departement" placeholder="numero departement"/>

Puis on formate l'adresse en ajoutant le code du département a afficher, on précise la fonction a appeler a la réception du fichier et enfin on lance la requête.

Receptionner, formater, afficher les donnés

Tout d'abord on teste si la requête c'est bien passé si c'est le cas on stock le donné dans une variable en utilisant responseText les donné seront en conséquence considéré en tant que chaine de caractère.

if (httpRequest.readyState === XMLHttpRequest.DONE) {
 
   if (httpRequest.status === 200) {

      var donne=httpRequest.responseText;
   }
}

Afin de transformer les donné en donné json exploitable on utilise JSON.parse.

donne=JSON.parse(donne)

Pour la suite on va trier les donné json nom plus par ordre alphabétique mais en fonction de la population décroissante des communes en utilisant sort

donne.sort(function(key1,key2){return key1.population < key2.population;} )

Avant de commencer le remplissage du tableau html on le vide avec innerHTML et on crée un variable qui contiendra le cumule de la population de chaque communes

document.getElementById("rendu").innerHTML='';
var popu_globale=0;

Le remplissage ce fait en utilisant une simple boucle afin de parcourir le tableau pour pouvoir récupérer pour chaque index l'objet contenant le donné d'une commune. On affiche que le nom de la commune ces codes postaux et sa population les autres donnés sont ignorés. On affichera aussi la position de la commune en fonction de sa population en récuperant la valeur d’incrémentation de la boucle et comme on ne récuperera que les commune de plus de 3000 habitant juste après l'initialisation de la boucle on ajoute une condition (if) que teste la valeur de la clé population enfin a chaque cycle de boucle apres le if on incrément une variable afin de comptabiliser la population de toutes les communes qui servira a afficher la population totale du département grace la clé population.

Pour ajouter une ligne de tableau on utilise insertRow et pour chaques colonne insertCell ce qui donne:

for ( var i = 0 ; i < donne.length ; i++) {
   
   if (donne[i].population > 3000) {

 var nouvelleLigne = document.getElementById("rendu").insertRow(-1);

 var nouvelleCellule = nouvelleLigne.insertCell(-1);

 nouvelleCellule.textContent=donne[i].nom

 nouvelleCellule = nouvelleLigne.insertCell(-1);

 nouvelleCellule.textContent=i+1

 nouvelleCellule = nouvelleLigne.insertCell(-1);

 nouvelleCellule.textContent=donne[i].codesPostaux

 nouvelleCellule = nouvelleLigne.insertCell(-1);

 nouvelleCellule.textContent=donne[i].population
 }

 popu_globale+=donne[i].population

}
}

Quand tout est terminé on affiche la population total du departement.

document.getElementById("popu_globale").value=popu_globale

Le code complet

<!doctype html>
 <html lang="fr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head>
 <style type="text/css">

 body{
  font-family:Verdana, Geneva, sans-serif;
  background-color:#b2bdc6;
 } 
 
 table {
  border:3px solid #6495ed;
  border-collapse:collapse;
  width:50%;
  margin:auto;
 }

 tbody {
  background-color:#FFFFFF;
  border:1px solid #6495ed;
 }

 th {

  padding:5px;
  background-color:#EFF6FF;
  width:25%;
 }
 td{
  font-family:sans-serif;
  font-size:80%;
  border:1px solid #6495ed;
  padding:5px;
  text-align:center;
 }

 </style>
 <script>
function rest(){

 var departement=document.getElementById('departement').value
 
 var adresse='https://geo.api.gouv.fr/departements/'+departement+'/communes'

 httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = gestion_requete;
    httpRequest.open('GET', adresse);
    httpRequest.send();

}


  function gestion_requete() {
  
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
 
      if (httpRequest.status === 200) {
   
   var donne=httpRequest.responseText;
   donne=JSON.parse(donne)
   
   donne.sort(function(key1,key2){return key1.population < key2.population;} )
   
   document.getElementById("rendu").innerHTML=''
   
   var popu_globale=0
   
   for ( var i = 0 ; i < donne.length ; i++) {
   
    if (donne[i].population > 3000) {
    
    var nouvelleLigne = document.getElementById("rendu").insertRow(-1);
    
    var nouvelleCellule = nouvelleLigne.insertCell(-1);
    
    nouvelleCellule.textContent=donne[i].nom
    
    nouvelleCellule = nouvelleLigne.insertCell(-1);
    
    nouvelleCellule.textContent=i+1
    
    nouvelleCellule = nouvelleLigne.insertCell(-1);
    
    nouvelleCellule.textContent=donne[i].codesPostaux
    
    nouvelleCellule = nouvelleLigne.insertCell(-1);
    
    nouvelleCellule.textContent=donne[i].population
    }

    popu_globale+=donne[i].population

   }
   
   document.getElementById("popu_globale").value=popu_globale

       }
   
   else {
        alert('problème de requête.');
      }
    }
  }

</script>
</head>
<body>
 
 <button onclick="rest()">api rest</button>
 <input type ="text" id="departement" placeholder="numero departement"/>
 <br>
 <input type ="text"  id='popu_globale'/>
 
 <table>
    <thead>
        <tr>
            <th>ville</th>
   <th>classement</th>
   <th>code postaux</th>
   <th>population</th>
        </tr>
    </thead>
    <tbody id="rendu">
        
    </tbody>
</table>

</body>
</html>
Ce document intitulé « Exploiter des donnés json » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Modifier et enregistrer le flux vidéo de la webcam avec captureStream et MediaRecorder
Tuto sur les balises de défilement
Rejoignez-nous