Laden einer lokalen JSON-Datei

Question

Ich versuche, eine lokale JSON-Datei zu laden, aber es wird nicht funktionieren. Hier ist mein JavaScript-Code (mit jQuery):

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

Die Datei test.json:

{"a" : "b", "c" : "d"}

Es wird nichts angezeigt und Firebug sagt mir, dass data ist undefiniert. In Firebug kann ich sehen json.responseText und es ist gut und gültig, aber es ist seltsam, wenn ich die Zeile kopiere:

 var data = eval("(" +json.responseText + ")");

in der Firebug-Konsole funktioniert es, und ich kann auf Daten zugreifen.

Hat jemand eine Lösung?

Answer 1

Ich habe die JSON-Datei ein wenig bearbeitet.

myfile.json => myfile.js

In der JSON-Datei (machen Sie daraus eine JS-Variable)

{name: "Whatever"} => var x = {name: "Whatever"}

Zum Schluss,

export default x;

Dann,

import JsonObj from './myfile.js';

Answer 2

Kürzlich D3js ist in der Lage, eine lokale json-Datei zu verarbeiten.

Das ist das Problem https://github.com/mbostock/d3/issues/673

Dies ist der Patch, damit D3 mit lokalen json-Dateien arbeiten kann. https://github.com/mbostock/d3/pull/632

Answer 3

In TypeScript können Sie import verwenden, um lokale JSON-Dateien zu laden. Zum Beispiel das Laden einer font.json:

import * as fontJson from '../../public/fonts/font_name.json';

Dazu ist das tsconfig-Flag --resolveJsonModule erforderlich:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Weitere Informationen finden Sie in den Release Notes von typescript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

Answer 4

Ein Ansatz, den ich gerne verwende, ist das Auffüllen/Einhüllen der json-Datei mit einem Objektliteral und das anschließende Speichern der Datei mit der Dateierweiterung .jsonp. Bei dieser Methode bleibt auch Ihre ursprüngliche json-Datei (test.json) unverändert, da Sie stattdessen mit der neuen jsonp-Datei (test.jsonp) arbeiten werden. Der Name des Wrappers ist frei wählbar, muss aber mit dem Namen der Callback-Funktion übereinstimmen, die Sie zur Verarbeitung der jsonp-Datei verwenden. Ich werde Ihre test.json-Datei als Beispiel verwenden, um den jsonp-Wrapper für die Datei "test.jsonp" zu zeigen.

json_callback({"a" : "b", "c" : "d"});

Als Nächstes erstellen Sie eine wiederverwendbare Variable mit globalem Umfang in Ihrem Skript, um das zurückgegebene JSON zu speichern. Dadurch werden die zurückgegebenen JSON-Daten allen anderen Funktionen in Ihrem Skript zur Verfügung gestellt und nicht nur der Callback-Funktion.

var myJSON;

Als Nächstes folgt eine einfache Funktion zum Abrufen von json durch Skriptinjektion. Beachten Sie, dass wir hier nicht jQuery verwenden können, um das Skript an den Dokumentenkopf anzuhängen, da IE die jQuery-Methode .append nicht unterstützt. Die im folgenden Code auskommentierte jQuery-Methode funktioniert in anderen Browsern, die die .append-Methode unterstützen. Sie ist als Referenz enthalten, um den Unterschied zu verdeutlichen.

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

Als nächstes folgt eine kurze und einfache Callback-Funktion (mit dem gleichen Namen wie der jsonp-Wrapper), um die json-Ergebnisdaten in die globale Variable zu übertragen.

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

Auf die json-Daten kann nun von beliebigen Funktionen des Skripts unter Verwendung der Punktnotation zugegriffen werden. Ein Beispiel:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

Diese Methode unterscheidet sich vielleicht ein wenig von dem, was Sie gewohnt sind, hat aber viele Vorteile. Erstens kann dieselbe jsonp-Datei lokal oder von einem Server mit denselben Funktionen geladen werden. Ein weiterer Vorteil ist, dass jsonp bereits in einem domänenübergreifenden Format vorliegt und auch leicht mit REST-APIs verwendet werden kann.

Zugegeben, es gibt keine Funktionen zur Fehlerbehandlung, aber wozu braucht man die auch? Wenn Sie nicht in der Lage sind, die json-Daten mit dieser Methode zu erhalten, dann können Sie ziemlich viel wetten, dass Sie einige Probleme innerhalb der json selbst haben, und ich würde es auf einem guten JSON-Validator überprüfen.

Answer 5

In Angular (oder jedem anderen Framework) können Sie mit http get laden Ich verwende es etwa so:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

Ich hoffe, das hilft.