Comment lire un fichier JSON local externe en JavaScript?

Pour lire le fichier JSON local externe (data.json) en utilisant javascript, créez d'abord vos données.fichier 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. Récupère l'objet 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.

Le chargement d'un fichier .json à partir du disque dur est une opération asynchrone et doit donc 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 .html ou .txt fichiers, en remplaçant le paramètre type mime à "text/html", "text/plain" etc.

1. tout d'Abord, créez un fichier json. Dans cet exemple, mon fichier est mots.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, c'est-à-dire, node.js. Notez l'argument 'utf8' à readFileSync: cela le fait retourner non pas un Buffer (bien que JSON.parse puisse le gérer), mais 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 voulez lire des détails d'identification particuliers, vous pouvez mentionner le code comme..

 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 dans l'url comme localhost:3030/get/33, Il donnera les détails liés à cet id....et vous avez lu par nom aussi. Mon fichier json a des noms simillar avec ce code, vous pouvez obtenir un nom détails....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 voulez tout lire les informations contenues dans le fichier puis utiliser ce code ci-dessous.

app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
 

, 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 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);

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.

Si vous utilisez des fichiers locaux, pourquoi ne pas simplement emballer les données en tant qu'objet js?

Les Données.js

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

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

Très simple.
Renommez votre fichier json en".js "à la place".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"}]';

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 en utilisant la console.déclaration de journal (commenté).

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 de filename.

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

Si vous n'avez que votre navigateur et que vous voulez lire un fichier local à partir d'un javascript qui s'exécute dans votre navigateur, cela signifie que vous n'avez qu'un client. Pour des raisons de sécurité, le navigateur ne devrait pas vous laisser faire une telle chose.

Cependant, comme lauhub l'a expliqué ci-dessus, cela semble fonctionner:

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

L'autre solution consiste à configurer quelque part dans votre machine un serveur web (minuscule dans windows ou singe dans linux) et avec une bibliothèque XMLHttpRequest ou D3, demandez le fichier du serveur et lisez-le. Le serveur va récupérer le fichier à partir du système de fichiers local et vous le servir via le web.

J'ai aimé ce que Stano / Meetar a commenté ci-dessus. Je l'utilise pour lire .des fichiers json. J'ai élargi leurs exemples en utilisant Promise. Voici le plunker pour la même chose. 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.

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);
 });

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

python -m SimpleHTTPServer 8181

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

L'utilisation de 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é.

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

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>

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

<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);
};
fileread.readAsText(file_to_read);
});

J'ai pris L'excellente réponse de Stano et l'ai enveloppée dans une promesse. Cela peut être utile si vous n'avez pas d'option comme node ou webpack pour charger un fichier json à partir du système de fichiers:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

Vous pouvez l'appeler comme ceci:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

Donc, si vous prévoyez d'utiliser "Apache Tomcat" pour héberger votre fichier JSON,

1 > après avoir démarré le serveur, vérifiez que votre Apache Tomcat est opérationnel en accédant à cette url: "localhost: 8080" -

2> Ensuite, allez dans le dossier "webapps" - "C:\Program fichiers \ Apache Software Foundation \ Tomcat 8.5 \ webapps". Et, créez un dossier de projet ou copiez votre projet dossier.

3 > collez votre fichier json là-bas.

4> Et c'est tout. Vous avez terminé! Il suffit d'aller à - " http://localhost:8080/ $ nom_projet$ / $ nom_jsonfile_name$.json"