Requêter un fichier JSON en JavaScript
Question
Créez un fichier JSON simple contenant votre nom, votre prénom et votre adresse.
Question
Faites fonctionner, testez et analysez le code JavaScript ci-après, expliquer ce qu'il fait.
CTRL+C pour copier, CTRL+V pour coller
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
}
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 = "QUERY YOUR JSON HERE TO BUILD YOUR RESULT"
// Output
document.getElementById("mydiv").appendChild(document.createTextNode(vResult));
};
}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>
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.
