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 dies mit fetch() mit Hilfe von async await tun. Es ist der neueste und sicherste Weg, Daten von einer URL abzurufen.

const url = "../asset/videoData.json";

const fetchJson = async () => {
  try {
    const data = await fetch(url);
    const response = await data.json();  
  } catch (error) {
    console.log(error);
  }
 };

Sie können dies auch verwenden, um Daten von einer externen URL abzurufen.

Answer 2

Wenn Sie lokale Dateien verwenden, warum verpacken Sie die Daten nicht einfach als JS-Objekt?

data.js

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

Keine XMLHttpRequests, kein Parsen, verwenden Sie einfach MyData.resource direkt

Answer 3

2021 Lösung (funktioniert in Chrome 91+)

Die JS-Datei, in der Sie die JSON-Datei importieren, sollte ein Modul sein:

Dann importieren Sie in script.js Ihre json-Datei:

import data from "./data.json" assert { type: "json" };

Sie können überprüfen, ob die Daten geladen wurden, mit console.log(data)

Quelle

Answer 4

Alle oben genannten Lösungen funktionieren nur, wenn Sie einen lokalen Webserver auf Ihrem lokalen Host ausführen. Wenn Sie dies ohne Webserver erreichen möchten, müssen Sie möglicherweise einen manuellen Aufwand betreiben, indem Sie die JSON-Datei mithilfe der Datei-Upload-Steuerung hochladen. Der Browser bietet diese Funktionalität ohne lokalen Server nicht an, da Sicherheitsrisiken bestehen.

Sie können die hochgeladene Datei auch ohne lokalen Webserver analysieren. Hier ist der Beispielcode, mit dem ich eine Lösung für ein ähnliches Problem erreicht habe.

    document.getElementById('inputfile')
        .addEventListener('change', function () {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                console.log(parsedJSON);
                // Ihr Code zum Verarbeiten des JSON
            }
            fileReader.readAsText(this.files[0]);
        }) 

In meinem Fall möchte ich eine lokale JSON-Datei lesen und sie in einer HTML-Datei auf meinem Desktop anzeigen, mehr muss ich nicht tun.

Hinweis: Versuchen Sie nicht, den Datei-Upload mithilfe von JavaScript zu automatisieren, auch das ist aufgrund der gleichen Sicherheitsbeschränkungen, die von Browsern auferlegt werden, nicht erlaubt.

Answer 5

Verwenden Sie einfach $.getJSON und dann $.each, um das Key / Wert-Paar zu durchlaufen. Beispielinhalt für die JSON-Datei und funktionaler Code:

    {
        {
            "key": "INFO",
            "value": "Dies ist ein Beispiel."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });