Wie liest man eine externe lokale JSON-Datei in JavaScript?

Question

Ich habe eine JSON-Datei in meinem lokalen System gespeichert und eine JavaScript-Datei erstellt, um die JSON-Datei zu lesen und die Daten auszudrucken. Hier ist die JSON-Datei:

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

Angenommen, dies ist der Pfad zur JSON-Datei: /Users/Documents/workspace/test.json.

Könnte mir bitte jemand helfen, ein einfaches Stück Code zu schreiben, um die JSON-Datei zu lesen und die Daten in JavaScript auszugeben?

Answer 1

Sie können die Methode XMLHttpRequest() verwenden:

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

Sie können die Antwort von myObj mithilfe des console.log-Statements sehen (auskommentiert).

Wenn Sie AngularJS kennen, können Sie $http verwenden:

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("Etwas ist schief gelaufen.");
  });
}

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

var service = this;

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

    return response;
  };
}

Wenn die Datei in einem anderen Ordner liegt, geben Sie den vollständigen Pfad anstelle des Dateinamens an.

Answer 2

Da Sie eine Webanwendung haben, haben Sie möglicherweise einen Client und einen Server.

Wenn Sie nur Ihren Browser haben und eine lokale Datei von einem in Ihrem Browser ausgeführten JavaScript lesen möchten, bedeutet das, dass Sie nur einen Client haben. Aus Sicherheitsgründen sollte der Browser Sie jedoch nicht solche Dinge tun lassen.

However, as lauhub oben bereits erklärt hat, scheint dies zu funktionieren:

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

Another solution is to set up a web server (tiny in Windows or monkey in Linux) somewhere on your machine and use an XMLHttpRequest or D3 library to request the file from the server and read it. The server will fetch the file from the local filesystem and serve it to you over the web.

Answer 3

Wenn Sie einen lokalen Webserver ausführen könnten (wie Chris P oben vorgeschlagen hat), und wenn Sie jQuery verwenden könnten, könnten Sie http://api.jquery.com/jQuery.getJSON/ ausprobieren.

Answer 4

Ich mochte, was Stano/Meetar oben kommentiert hat. Ich benutze es, um .json-Dateien zu lesen. Ich habe ihre Beispiele mit Promise erweitert. Hier ist der Plunker dazu. 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); 
       });

Das Lesen von JSON kann in eine andere Funktion verschoben werden, um DRY zu sein; aber das Beispiel hier zeigt mehr darüber, wie man Promises verwendet.

Answer 5

Sie können d3.js verwenden, um JSON-Dateien zu importieren. Rufen Sie einfach d3 auf Ihrem HTML-Body auf:

Dann fügen Sie dies in Ihre Javascript-Skripte ein:

  d3.json("test.json").then(function(data_json) {
         //do your stuff
  })