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 müssen eine neue XMLHttpRequest-Instanz erstellen und den Inhalt der json-Datei laden.

Dieser Tipp hat für mich funktioniert (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); // Ersetzen Sie 'my_data' durch den Pfad zu Ihrer Datei
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Erforderliche Verwendung eines anonymen Rückrufs, da .open KEINEN Wert zurückgibt, sondern im asynchronen Modus einfach undefined zurückgibt
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // JSON-String in Objekt analysieren
    var actual_JSON = JSON.parse(response);
 });

Answer 2

Die Verwendung von jQuery und ajax funktioniert gut, um eine JSON-Datei zu lesen und die Daten zu manipulieren

    $(document).ready(function () {
        $.ajax({
            url: 'country.json',
            type: 'GET',
            dataType: 'json',
            success: function (code, status) {
                for (let i in code) {
                    console.log(i)
                           }

            }
        });
    });

Answer 3

Wollte nur eine weitere Methode bereitstellen, da mir alles oben zu kompliziert erschien. Funktioniert für mich auf meinem Chrome Version 95.0.4638.54.

Nur schneller und schmutziger JS-Code

// Lese JSON-Dokument und entferne den Zeilenumbruch
var object = JSON.stringify(document.activeElement.textContent.replaceAll('\n',''));

// Parsed den String in JSON... weiß nicht warum, aber nur JSON.parse ist nicht genug...
var json = JSON.parse(JSON.parse(object));

// Lese dein JSON
json.items[0].contactInfo.firstName

// Viel Spaß

Test JSON:

{
  "items": [
    {
      "type": "test1",
      "id": "test1",
      "name": "test1",
      "entityId": "test1",
      "active": true,
      "contactInfo": {
        "company": "test1",
        "firstName": "test1",
        "email": "test1"
      }
    },
    {
      "type": "test2",
      "id": "test2",
      "name": "test2",
      "entityId": "test2",
      "active": true,
      "contactInfo": {
        "company": "test2",
        "firstName": "test2",
        "email": "test2"
        }
    }
    ]
}

Answer 4

Sie könnten D3 verwenden, um den Rückruf zu behandeln und die lokale JSON-Datei data.json zu laden, wie folgt:

  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });

Answer 5

Wandeln Sie die JSON-Datei in eine .js-Datei um und weisen Sie sie einer Variablen oder Konstanten zu, und beziehen Sie sich dann in Ihrer Haupt-Javascript-Datei darauf.