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

Wie zu verwenden XMLHttpRequest zum Laden der lokalen json Datei

ES5-Version

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

function loadJSON(callback) {
  var xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  xObj.open('GET', './data.json', true);
  // 1. replace './data.json' with the local path of your file
  xObj.onreadystatechange = function() {
      if (xObj.readyState === 4 && xObj.status === 200) {
          // 2. call your callback function
          callback(xObj.responseText);
      }
  };
  xObj.send(null);
}

function init() {
  loadJSON(function(response) {
    // 3. parse JSON string into JSON Object
    console.log('response =', response);
    var json = JSON.parse(response);
    console.log('your local JSON =', JSON.stringify(json, null, 4));
    // 4. render to your page
    const app = document.querySelector('#app');
    app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
  });
}

init();

<section id="app">
   loading...
</section>

ES6-Version

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

const loadJSON = (callback) => {
  const xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  // 1. replace './data.json' with the local path of your file
  xObj.open('GET', './data.json', true);
  xObj.onreadystatechange = () => {
      if (xObj.readyState === 4 && xObj.status === 200) {
          // 2. call your callback function
          callback(xObj.responseText);
      }
  };
  xObj.send(null);
}

const init = () => {
  loadJSON((response) => {
      // 3. parse JSON string into JSON Object
      console.log('response =', response);
      const json = JSON.parse(response);
      console.log('your local JSON =', JSON.stringify(json, null, 4));
      // 4. render to your page
      const app = document.querySelector('#app');
      app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`;
  });
}

init();

<section id="app">
   loading...
</section>

Online-Demo

https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html

Answer 2

Fügen Sie Ihrer JSON-Datei von Anfang an hinzu

var object1 = [

und am Ende

]

Speichern Sie es

Dann laden Sie es mit pure js als

<script type="text/javascript" src="1.json"></script>

Und jetzt können Sie es als object1 verwenden - es ist bereits geladen!

Funktioniert perfekt in Chrome und ohne zusätzliche Bibliotheken

Answer 3

Ich kann nicht glauben, wie oft diese Frage schon beantwortet wurde, ohne das Problem mit dem eigentlichen Code des Originalposters zu verstehen und/oder zu lösen. Das heißt, ich bin ein Anfänger selbst (nur 2 Monate der Codierung). Mein Code funktioniert perfekt, aber Sie können gerne Änderungen vorschlagen. Hier ist die Lösung:

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

Hier ist ein kürzerer Weg, um denselben Code zu schreiben, den ich oben angegeben habe:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

Sie können auch $.ajax anstelle von $.getJSON verwenden, um den Code auf die gleiche Weise zu schreiben:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText); 

Schließlich die letzte Möglichkeit, dies zu tun ist es, $.ajax in eine Funktion zu verpacken. Diese Funktion ist nicht mein Verdienst, aber ich habe sie ein wenig modifiziert. Ich habe es getestet und es funktioniert und liefert die gleichen Ergebnisse wie mein obiger Code. Ich habe diese Lösung hier gefunden --> json in Variable laden

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

El test.json Datei, die Sie in meinem obigen Code sehen, wird auf meinem Server gehostet und enthält das gleiche json-Datenobjekt, das er (der ursprüngliche Poster) gepostet hatte.

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

Answer 4

Ich bin überrascht, dass der Import aus es6 nicht erwähnt wurde (Verwendung mit kleinen Dateien)

Ex: import test from './test.json'

webpack 2< verwendet die json-loader als Standard für .json Dateien.

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

Para TypScript :

import test from 'json-loader!./test.json';

TS2307 (TS) Modul 'json-loader!./suburbs.json' kann nicht gefunden werden

Um es zum Laufen zu bringen, musste ich das Modul zuerst deklarieren. Ich hoffe, dass dies jemandem ein paar Stunden erspart.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

Wenn ich versuchen würde, etwas wegzulassen loader de json-loader Ich erhalte folgende Fehlermeldung von webpack :

BREAKING CHANGE: Es ist nicht mehr erlaubt, das Suffix '-loader' wegzulassen wegzulassen, wenn Lader verwendet werden. Sie müssen 'json-loader' anstelle von 'json' angeben, siehe https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Answer 5

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