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

Ich habe Stano's exzellente Antwort übernommen und sie in ein Versprechen eingewickelt. Dies könnte nützlich sein, wenn Sie keine Option wie Node oder Webpack haben, um eine JSON-Datei vom Dateisystem zu laden:

// XMLHttpRequest in ein Versprechen eingewickelt
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);
});

Sie können es folgendermaßen aufrufen:

readFileP('')
    .then(d => {
      ''
    });

Answer 2

[Update]- Für Python 3 funktioniert SimpleHTTPServer nicht mehr. Verwenden Sie stattdessen folgendes] Zuerst gehen Sie in Ihren Projektordner und führen Sie aus

python -m http.server 8181

[alte Antwort]

Ein einfacher Workaround ist, Ihre JSON-Datei in einem lokal laufenden Server zu platzieren. Gehen Sie dazu im Terminal in Ihren Projektordner und starten Sie den lokalen Server auf einem bestimmten Port, z.B. 8181

python -m SimpleHTTPServer 8181

Dann sollte das Durchsuchen von http://localhost:8181/ alle Ihre Dateien einschließlich des JSON anzeigen. Denken Sie daran, Python zu installieren, wenn Sie es noch nicht haben.

Answer 3

Ich habe das oben Genannte gelesen und bemerkt, dass in Projekten normalerweise mehr als eine JSON-Datei geladen werden möchte. In einigen Fällen eine Unmenge und in einigen Fällen "ein Verzeichnis mit JSON-Dateien" (für die Sie sonst zuerst eine Liste generieren müssten, um jede davon herunterladen zu können). Es kann unübersichtlich werden, wenn dies im ganzen Projekt verstreut ist. Und es kann mühsam sein, wenn es viele Beziehungen zwischen Daten in den JSON-Dateien gibt.

Natürlich können all dies mit den oben genannten Methoden gemacht werden, entweder indem sie zu .js-Dateien gemacht werden oder indem sie über eine Art lokales Abrufen abgerufen werden.

Eine alternative (wenn Sie keine serverseitige Lösung mit Ebenen möchten), die ich nützlich gefunden habe, besteht darin, zuerst alle Ihre Daten in einer Sql Lite-Datenbank zu laden. Dies macht das Verwalten von mehr Daten auch etwas einfacher und Sie haben nur eine Datei mit all Ihren Daten usw...

Dann verwenden Sie Web Assembly, um Ihre SQLite-Datenbank zu laden, und dann können Sie reguläre Abfragen verwenden, um Ihre Daten clientseitig abzufragen. Das alles kann also clientseitig erledigt werden.

Hier ist ein Beispiel: https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts (typescript-Datei, die zu einer clientseitigen Lösung kompiliert wird).

Auf einer Lese-/Schreibseite können Sie eine SQLite-Datenbank pro Benutzer bereitstellen, die zwischengespeichert wird, damit die Daten für diesen Benutzer eindeutig sind, usw.

ref: https://github.com/sql-js/sql.js