Comment lire un fichier json en javascript ?

10 juin 2019    /    Viewed: 9833    /    Comments: 0    /    Edit


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


Card image cap
profile-image
Daidalos

Je développe le présent site avec le framework python Django. Je m'intéresse aussi actuellement dans le cadre de mon travail au machine learning pour plusieurs projets (voir par exemple) et toutes suggestions ou commentaires sont les bienvenus !