Un programme JSON

Soit le fichier HTML et le fichier JavaScript ci-après.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Démo JSON/JavaScript</title>
<script type="text/javascript" src="query.js"></script>
</head>
<body>
<input type="file" id="myfile" onchange="query()"/>
<div id="mydiv"/>
</body>
</html>
function query() {
// File	
var vFile = document.getElementById("myfile").files[0];
// Reader
var vReader = new FileReader();
vReader.readAsText(vFile);
vReader.onload = function(pEvent) {
    // String Input
    var vContent = pEvent.target.result;   
    // JSON to object
    var vJson = JSON.parse(vContent);    
    // Query
    var vResult = vJson.prenom + " " + vJson.nom + " (" + vJson.age + ")";
    // Output
    document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
};
}

Écrire un fichier JSON permettant de représenter une personne avec les attributs suivants :

  • un nom

  • un prénom

  • un age

  • une liste d'adresses mail

{
"nom":"Crozat",
"prenom":"Stéphane",
"age":40,
"adresse": ["stephane.crozat@utc.fr", "stph@crzt.fr"]
}

Expliquer ce que fait le programme. Tester le programme avec le fichier JSON proposé.

Compléter la fonction query() afin d'afficher la liste des adresses mail (en plus des information actuelles).

On parcours le tableau JSON à l'aide d'une boucle.

for (var i=0;i<vJson.adresse.length;i++) {
  ...
}
function query() {
// File	
var vFile = document.getElementById("myfile").files[0];
// Reader
var vReader = new FileReader();
vReader.readAsText(vFile);
vReader.onload = function(pEvent) {
    // String Input
    var vContent = pEvent.target.result;   
    // JSON to object
    var vJson = JSON.parse(vContent);    
    // Query
    var vResult = vJson.prenom + " " + vJson.nom + " (" + vJson.age + ")";
    // Adding adresses
    for (var i=0;i<vJson.adresse.length;i++) {
      vResult = vResult + " " + vJson.adresse[i];
    }
    // Output
    document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
};
}
AccueilIntroduction aux bases de données non-relationnelles > Cours > Un exemple : Modélisation logique arborescente et objet en JSON > Exercice : Un programme JSON< PrécédentSuivant >