web-dev-qa-db-fra.com

Comment lire un fichier JSON local externe en JavaScript?

J'ai enregistré un fichier JSON dans mon système local et créé un fichier JavaScript afin de lire le fichier JSON et d'imprimer les données. Voici le fichier JSON:

{"resource":"A","literals":["B","C","D"]}

Disons que c’est le chemin du fichier JSON: /Users/Documents/workspace/test.json.

Quelqu'un pourrait-il m'aider à écrire un simple morceau de code pour lire le fichier JSON et imprimer les données qu'il contient en JavaScript?

javascriptjson
199
user2864315

Vous ne pouvez pas effectuer un appel AJAX vers une ressource locale car la demande est effectuée à l'aide de HTTP.

Une solution consiste à exécuter un serveur Web local, à servir le fichier et à appeler AJAX vers localhost.

Pour vous aider à écrire du code pour lire JSON, vous devriez lire la documentation de jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

74
Chris Pickford

Pour lire le fichier JSON local externe (data.json) à l'aide de javascript, créez d'abord votre fichier data.json:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

  1. Mentionnez le chemin du fichier json dans la source du script avec le fichier javascript.

    <script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>

  2. Obtenir l'objet à partir du fichier json

    var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);

Pour plus d'informations, voir cette référence .

159
Ashfedy

Le chargement d'un fichier .json] à partir du disque dur est une opération asynchrone. Il est donc nécessaire de spécifier une fonction de rappel à exécuter après le chargement du fichier.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Cette fonction fonctionne également pour charger un fichier .html ou .txt, en remplaçant le paramètre de type mime par "text/html", "text/plain" etc.

108
Stano
  1. Commencez par créer un fichier JSON. Dans cet exemple, mon fichier est words.json
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]
  1. Et voici mon code i.e, node.js. Notez l'argument 'utf8' de readFileSync: cela le renvoie non pas par Buffer (bien que JSON.parse puisse le gérer), mais par une chaîne. Je crée un serveur pour voir le résultat ...
var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());
  1. Lorsque vous souhaitez lire des informations d'identification particulières, vous pouvez mentionner le code sous la forme ..
 app.get('/get/:id',function(req,res){
        
var i;
                 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");
          
});
  1. Lorsque vous entrez l'URL sous le nom localhost:3030/get/33, il vous donnera les détails relatifs à cet identifiant ... et vous le lirez également par son nom. Mon fichier json a des noms simillar avec ce code vous pouvez obtenir un nom de nom .... et il n’a pas imprimé tous les noms simillar
 app.get('/get/:name',function(req,res){
        
var i;
                 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");
          
});
  1. Et si vous voulez lire les détails du nom Simillar, vous pouvez utiliser ce code.
app.get('/get/name/:name',function(req,res){
Word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(Word);
                         
 console.log("success");
          
});
  1. Si vous souhaitez lire toutes les informations du fichier, utilisez le code ci-dessous.
app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
27
Syed Ayesha Bebe

Quand dans Node.js ou en utilisant require.js dans le navigateur , vous pouvez simplement faire:

let json = require('/Users/Documents/workspace/test.json');

Remarque: le fichier est chargé une fois, les appels suivants utiliseront le cache.

12
musicformellons

Selon votre navigateur, vous pouvez accéder à vos fichiers locaux. Mais cela peut ne pas fonctionner pour tous les utilisateurs de votre application.

Pour ce faire, vous pouvez essayer les instructions à partir d’ici: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Une fois votre fichier chargé, vous pouvez récupérer les données en utilisant:

var jsonData = JSON.parse(theTextContentOfMyFile);
11
lauhub

Si vous utilisez des fichiers locaux, pourquoi ne pas simplement empaqueter les données sous forme d'objet js?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

Non XMLHttpRequests , pas d'analyse, il suffit d'utiliser MyData.resource directement

10
user7394313

Très simple.
Renommez votre fichier JSON en ".js" à la place de ".json".

<script type="text/javascript" src="my_json.js"></script>

Alors suivez votre code normalement.

<script type="text/javascript">
var obj = JSON.parse(contacts);

Cependant, juste pour information, le contenu de mon json ressemble au snip ci-dessous.

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
10
Antonio Carlos Del Grande Juni

Utiliser la Fetch API est la solution la plus simple:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

Cela fonctionne parfaitement dans Firefox, mais dans Chrome, vous devez personnaliser les paramètres de sécurité.

8
Alex Glinsky


Comme beaucoup de personnes mentionnées précédemment, cela ne fonctionne pas avec un appel AJAX. Cependant, il y a un moyen de le contourner. En utilisant l'élément input, vous pouvez sélectionner votre fichier.

Le fichier sélectionné (.json) doit avoir cette structure:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]



<input type="file" id="get_the_file">

Ensuite, vous pouvez lire le fichier en utilisant JS avec FileReader ():

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});
7
Sarah Cross

Utilisez simplement $ .getJSON, puis $ .each pour itérer la paire clé/valeur. Exemple de contenu pour le fichier JSON et le code fonctionnel:

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });
4
Juan Carlos Aviles Lazcano

Vous pouvez utiliser la méthode XMLHttpRequest ():

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

Vous pouvez voir la réponse de myObj à l'aide de l'instruction console.log (commentée).

Si vous connaissez AngularJS, vous pouvez utiliser $ http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

Si vous avez le fichier dans un autre dossier, mentionnez le chemin complet au lieu du nom de fichier.

3
Maharshi Rawal

Puisque vous avez une application Web, vous pouvez avoir un client et un serveur.

Si vous ne possédez que votre navigateur et que vous souhaitez lire un fichier local à partir d'un javascript exécuté sur votre navigateur, cela signifie que vous ne disposez que d'un client. Pour des raisons de sécurité, le navigateur ne doit pas vous permettre de le faire.

Cependant, comme expliqué plus haut par lauhub, cela semble fonctionner:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Une autre solution consiste à installer quelque part sur votre machine un serveur Web (minuscule dans Windows ou monkey sous Linux) et avec une bibliothèque XMLHttpRequest ou D3, demandez le fichier au serveur et lisez-le. Le serveur va extraire le fichier du système de fichiers local et vous le transmettre via le Web.

2
Antoni

Une solution de contournement simple consiste à placer votre fichier JSON dans un serveur exécuté localement. pour cela depuis le terminal, allez dans le dossier de votre projet et démarrez le serveur local sur un numéro de port, par exemple 8181

python -m SimpleHTTPServer 8181

Puis naviguez vers http: // localhost: 8181 / devrait afficher tous vos fichiers, y compris le JSON. N'oubliez pas d'installer python si vous n'en avez pas déjà.

1
ewalel

Vous devez créer une nouvelle instance XMLHttpRequest et charger le contenu du fichier json.

Cette astuce fonctionne pour moi ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript ):

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });
1
rodrigomelo

J'ai aimé ce que Stano/Meetar a commenté ci-dessus. Je l'utilise pour lire les fichiers .json. J'ai élargi leurs exemples en utilisant Promise. Voici le plunker pour le même. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

La lecture de JSON peut être déplacée dans une autre fonction, pour DRY; mais l'exemple ici est plus de montrer comment utiliser les promesses.

1
Plankton

Si vous pouviez exécuter un serveur Web local (comme Chris P suggéré ci-dessus), et si vous pouviez utiliser jQuery, vous pourriez essayer http://api.jquery.com/jQuery.getJSON /

0
Nicolae Olariu

Vous pouvez utiliser D3 pour gérer le rappel et charger le fichier JSON local data.json, comme suit:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>
0
AlexG