Requêter un fichier JSON en JavaScript
Question
Créez un fichier JSON simple contenant votre nom, votre prénom et votre adresse.
Solution
Exemple :
1
{2
"nom":"Crozat",
3
"prenom":"Stéphane",
4
"age":"40"
5
}
Question
Faites fonctionner, testez et analysez le code JavaScript ci-après, expliquer ce qu'il fait.
1
function query() {
2
// File 3
var vFile = document.getElementById("myfile").files[0];
4
// Reader5
var vReader = new FileReader();
6
vReader.readAsText(vFile);
7
vReader.onload = function(pEvent) {
8
// String Input9
var vContent = pEvent.target.result;
10
// JSON to object11
var vJson = JSON.parse(vContent);
12
// Query13
var vResult = "QUERY YOUR JSON HERE TO BUILD YOUR RESULT"
14
// Output15
document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
16
};
17
}
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>Question
En complétant la fonction query() ci-avant, affichez dans la page HTML votre prénom, suivi de votre nom et de votre age entre parenthèse.
Solution
Exemple :
1
function query() {
2
// File 3
var vFile = document.getElementById("myfile").files[0];
4
// Reader5
var vReader = new FileReader();
6
vReader.readAsText(vFile);
7
vReader.onload = function(pEvent) {
8
// String Input9
var vContent = pEvent.target.result;
10
// JSON to object11
var vJson = JSON.parse(vContent);
12
// Query13
var vResult = vJson.prenom + " " + vJson.nom + " (" + vJson.age + ")";
14
// Output15
document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
16
};
17
}
