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

Zum Lesen der externen lokalen JSON-Datei (data.json) mit JavaScript, erstellen Sie zuerst Ihre data.json-Datei:

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

Dann,

1. Erwähnen Sie den Pfad zur JSON-Datei im Skriptquellcode zusammen mit der JavaScript-Datei

2. Holen Sie das Objekt aus der JSON-Datei

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

Answer 2

Das Laden einer .json-Datei von der Festplatte ist ein asynchroner Vorgang und erfordert daher die Angabe einer Rückruffunktion, die nach dem Laden der Datei ausgeführt werden soll.

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

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

Diese Funktion funktioniert auch für das Laden von .html- oder .txt-Dateien, indem der Mime-Typ-Parameter auf "text/html", "text/plain" usw. überschrieben wird.

Answer 3

Sie können keinen AJAX-Aufruf an eine lokale Ressource tätigen, da die Anfrage über HTTP erfolgt.

Ein Workaround besteht darin, einen lokalen Webserver zu starten, die Datei bereitzustellen und den AJAX-Aufruf an localhost zu senden.

Wenn es darum geht, Ihnen beim Schreiben von Code zum Lesen von JSON zu helfen, sollten Sie die Dokumentation für jQuery.getJSON() lesen:

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

Answer 4

Wenn in Node.js oder beim Verwenden von require.js im Browser, kannst du einfach Folgendes tun:

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'das JSON-Objekt');

Beachte: Die Datei wird einmal geladen, nachfolgende Aufrufe verwenden den Zwischenspeicher.

Answer 5

Die einfachste Lösung ist die Verwendung der Fetch API:

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

Es funktioniert perfekt in Firefox, aber in Chrome müssen Sie die Sicherheitseinstellungen anpassen.