Un programme JSON

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<html>
2
<head>
3
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4
<title>Démo JSON/JavaScript</title>
5
<script type="text/javascript" src="query.js"></script>
6
</head>
7
<body>
8
<input type="file" id="myfile" onchange="query()"/>
9
<div id="mydiv"/>
10
</body>
11
</html>
<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>
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
function query() {
2
// File
3
var vFile = document.getElementById("myfile").files[0];
4
// Reader
5
var vReader = new FileReader();
6
vReader.readAsText(vFile);
7
vReader.onload = function(pEvent) {
8
    // String Input
9
    var vContent = pEvent.target.result;
10
    // JSON to object
11
    var vJson = JSON.parse(vContent);
12
    // Query
13
    var vResult = vJson.prenom + " " + vJson.nom + " (" + vJson.age + ")";
14
    // Output
15
    document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
16
};
17
}
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));
};
}

Question

É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

Question

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

Question

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