Comment lire un fichier json en javascript ?

Daidalos June 10, 2019


Exemple de comment lire un fichier json en javascript:

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/:

Comment lire un fichier json en javascript ?

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:

Comment lire un fichier json en javascript ?

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:

Comment lire un fichier json en javascript ?

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

Licence


Activity


Google Ads