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

Sie können Ihr json in einer Javascript-Datei ablegen. Diese kann lokal geladen werden (sogar in Chrome), indem Sie die jQuery-Funktion getScript() Funktion.

map-01.js-Datei:

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

Ausgabe:

world width: 500

Beachten Sie, dass die json-Variable in der js-Datei deklariert und zugewiesen wird.

Answer 2

Wenn Sie ein lokales Array für JSON verwenden - wie Sie in Ihrem Beispiel in der Frage gezeigt haben (test.json), dann können Sie die parseJSON() Methode von JQuery ->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() wird verwendet, um JSON von einem entfernten Standort zu erhalten - es funktioniert nicht lokal (es sei denn, Sie verwenden einen lokalen HTTP-Server)

Answer 3

$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });

             }
  });

Answer 4

Wie ich die Daten aus einer json-Datei in eine JavaScript-Variable mit einfachem JavaScript laden konnte:

let mydata;
fetch('datafile.json')
    .then(response => response.json()) 
    .then(jsonResponse => mydata = jsonResponse)

Ich poste hier, weil ich diese Art von "Lösung", nach der ich gesucht habe, nicht gefunden habe.

Hinweis: Ich verwende einen lokalen Server, der über das übliche " python -m http.server Befehl".

Answer 5

$.getJSON funktionierte bei mir nur in Chrome 105.0.5195.125 mit await , die ein script type de module .

<script type="module">
    const myObject = await $.getJSON('./myObject.json');
    console.log('myObject: ' + myObject);
</script>

Ohne await Ich verstehe:

Uncaught TypeError: myObject is not iterable

beim Auflösen myObject .

Ohne type="module" Ich verstehe:

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules