Laden einer lokalen JSON-Datei

Question

Laden einer lokalen JSON-Datei

Gefragt el 8 de September, 2011: Wann wurde die Frage gestellt
1326929 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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?

Gefragt el 8 de September, 2011 von Patrick Browne

Answer 1

5 Antworten

Answer 2

355voto

seppo0010 Punkte 14176

$.getJSON ist asynchron, also sollten Sie es tun:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Beantwortet el 8 de September, 2011 von seppo0010 (14176 Punkte )

Answer 3

253voto

Ehvince Punkte 15552

Ich hatte das gleiche Bedürfnis (um meine Angularjs-App zu testen), und der einzige Weg, den ich gefunden habe, ist require.js zu verwenden:

var json = require('./data.json'); //(with path)

Hinweis: Die Datei wird nur einmal geladen, bei weiteren Aufrufen wird der Cache verwendet.

Mehr zum Lesen von Dateien mit Nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js: http://requirejs.org/

Beantwortet el 5 de August, 2013 von Ehvince (15552 Punkte )

Answer 4

194voto

aloisdg Punkte 18811

Auf eine modernere Art und Weise können Sie jetzt die API abrufen :

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

Alle modernen Browser unterstützen die Fetch-API. (Internet Explorer nicht, aber Edge schon!)

oder mit async/await

async function printJSON() {
    const response = await fetch("test.json");
    const json = await response.json();
    console.log(json);
}

Quelle:

Beantwortet el 16 de Februar, 2017 von aloisdg (18811 Punkte )

Answer 5

123voto

Trausti Kristjansson Punkte 2826

Wenn Sie den Benutzer die lokale json-Datei (irgendwo im Dateisystem) auswählen lassen wollen, funktioniert die folgende Lösung.

Es verwendet FileReader und JSON.parser (und kein Jquery).

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>

<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

Hier ist eine gute Einführung in FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Beantwortet el 30 de Januar, 2014 von Trausti Kristjansson (2826 Punkte )

Answer 6

115voto

jwerre Punkte 8488

Wenn Sie etwas Schnelles und Schmutziges suchen, laden Sie die Daten einfach in den Kopf Ihres HTML-Dokuments.

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

Ich sollte erwähnen, dass Ihre Heap-Größe (in Chrome) etwa 4 GB beträgt, wenn Ihre Daten also größer sind, sollten Sie eine andere Methode finden. Wenn Sie einen anderen Browser überprüfen möchten, versuchen Sie dies:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

Beantwortet el 1 de Juni, 2015 von jwerre (8488 Punkte )

Laden einer lokalen JSON-Datei

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Laden einer lokalen JSON-Datei

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: