Exemple de comment lire un fichier json en javascript:
Table des matières
Lire le fichier
Soit le fichier json suivant data.json:
{"file_1": {"status": "0","author": "John","size": "3245"},"file_2": {"status": "1","author": "Jane","size": "19462"}}
On peut alors créer une simple page html (test.html par exemple) et lire le fichier json comme ceci:
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><script>window.onload = function(){$.get("data.json", function(data){console.log(data);});}</script></body></html>
Note: pour pouvoir utiliser le code ci-dessus il est nécessaire de lancer un http serveur. Pour cela on peut par exemple utiliser python 3 et lancer la commande suivante dans votre terminal:
python -m http.server 8001
puis d'ouvrir le web browser chrome par exemple et se rendre dur l'url suivante http://0.0.0.0:8001/:
Avec chrome on peut ensuite aller dans le menu View -> Developer -> JavaScript Console pour afficher sur la droite une console javascript permettant de tester le code ci-dessus. Cliquer ensuite sur le fichier test.html et verifier si le code arrive à lire le fichier json:
Extraire les variables du fichier json
On peut alors extraire une variable du fichier json comme ceci (data["file_1"]["author"] pour obtenir le nom de l'auteur dans file_1:
code
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><script>window.onload = function(){$.get("data.json", function(data){console.log(data);console.log(data["file_1"]["author"]);});}</script></body></html>
Références
| Liens | Site |
|---|---|
| Reading files in JavaScript using the File APIs | html5rocks |
| How to read local text file into a JS | freecodecamp |
| Read a local text file using Javascript | stackoverflow |
| HTML5 FileReader API Demo: Text | codepen.io |
| How to read a local text file? | stackoverflow |
| Javascript Program to read text File | geeksforgeeks |
