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 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 à rédiger un simple morceau de code pour lire le fichier JSON et imprimer les données en JavaScript?

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

Une solution de contournement 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 pour jQuery.getJSON():

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

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. Obtenez 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, consultez cette référence .

Le chargement d'un .jsonfichier à 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 des .txtfichiers, en remplaçant le paramètre de type mime par "text/html", "text/plain"etc.

Lorsque vous êtes dans Node.js ou lorsque vous utilisez 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.

1. Créez d'abord 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"}]

2. Et voici mon code, c'est-à-dire node.js. Notez l' 'utf8'argument à readFileSync: cela lui fait renvoyer non pas un Buffer(bien qu'il JSON.parsepuisse 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());

3. Lorsque vous souhaitez lire les détails d'un identifiant particulier, 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");
	  
});

4. Lorsque vous avez entré l'URL, localhost:3030/get/33cela donnera les détails liés à cet identifiant .... et vous lisez également par nom. Mon fichier json a des noms simillar avec ce code, vous pouvez obtenir un nom de détail .... 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");
	  
});

5. Et si vous voulez lire les détails du nom de 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");
	  
});

6. Si vous souhaitez lire toutes les informations du fichier, utilisez ce code ci-dessous.

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

 }
 

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

Comme beaucoup de personnes l'ont mentionné auparavant, cela ne fonctionne pas en utilisant un appel AJAX. Cependant, il existe un moyen de contourner cela. À l'aide de l'élément d'entrée, 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);
});

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

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

data.js

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

Pas de XMLHttpRequests , pas d'analyse, utilisez simplement MyData.resourcedirectement

Très simple.
Renommez votre fichier json en ".js" au lieu de ".json".

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

Suivez donc 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 l'importer comme le module ES6;

import data from "/Users/Documents/workspace/test.json"

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

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 (mise en commentaire).

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.

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

Si vous ne disposez que de votre navigateur et que vous souhaitez 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 doit 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/

Une autre solution consiste à configurer quelque part dans 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 récupérera le fichier du système de fichiers local et vous le servira via le Web.

J'ai aimé ce que Stano / Meetar a commenté ci-dessus. Je l'utilise pour lire des fichiers .json. J'ai développé leurs exemples en utilisant Promise. Voici le plongeur 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.

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 exécuté localement. pour cela depuis le terminal, allez dans votre dossier de projet et démarrez le serveur local sur un certain numéro de port, par exemple 8181

python -m SimpleHTTPServer 8181

Ensuite, la navigation 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à fait.

Si vous pouviez exécuter un serveur Web local (comme Chris P l'a suggéré ci-dessus), et si vous pouviez utiliser jQuery, vous pourriez essayer 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>

J'ai pris l' excellente réponse de Stano et l' ai enveloppée dans une promesse. Cela peut être utile si vous ne disposez pas d'une option telle que node ou webpack sur laquelle se replier 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 allant à cette URL: "localhost: 8080" -

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

3> Collez votre fichier json là-bas.

4> Et c'est tout. Vous avez terminé! Allez simplement sur - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"