Un programme de traitement de JSON

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

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>
1
function query() {
2
// File
3
let vFile = document.getElementById("myfile").files[0];
4
// Reader
5
let vReader = new FileReader();
6
vReader.readAsText(vFile);
7
vReader.onload = function(pEvent) {
8
    // String Input
9
    let vContent = pEvent.target.result;
10
    // JSON to object
11
    let vJson = JSON.parse(vContent);
12
    // Query
13
    let vResult = vJson.prenom + " " + vJson.nom + " (" + vJson.age + ")";
14
    // Output
15
    document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
16
};
17
}

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

Indice

La syntaxe JSON

Solution

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

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).

Indice

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

1
for (let i=0;i<vJson.adresse.length;i++) {
2
  ...
3
}

Solution

1
function query() {
2
// File
3
let vFile = document.getElementById("myfile").files[0];
4
// Reader
5
let vReader = new FileReader();
6
vReader.readAsText(vFile);
7
vReader.onload = function(pEvent) {
8
    // String Input
9
    let vContent = pEvent.target.result;
10
    // JSON to object
11
    let vJson = JSON.parse(vContent);
12
    // Query
13
    let vResult = vJson.prenom + " " + vJson.nom + " (" + vJson.age + ")";
14
    // Adding adresses
15
    for (let i=0;i<vJson.adresse.length;i++) {
16
      vResult = vResult + " " + vJson.adresse[i];
17
    }
18
    // Output
19
    document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
20
};
21
}