Wie liest man eine JSON-Datei mit fetch() in Javascript?

Lesezeit: 4 Minuten

Wie liest man eine JSON Datei mit fetch in Javascript
BRRusev

Wie kann ich eine lokale JSON-Datei mit Abruffunktion in Javascript lesen? Ich habe eine JSON-Datei mit einigen Dump-Daten und einer Funktion, die die JSON-Datei auf dem Server liest. Zum Beispiel :

readJson () {
   console.log(this)
   let vm = this
   // http://localhost:8080
   fetch('/Reading/api/file').then((response) => response.json()).then(json => {
       vm.users = json
       console.log(vm.users)
   }).catch(function () {
       vm.dataError = true
   })
}

Was muss also getan werden, um die lokale JSON-Datei in dieser Abruffunktion zu lesen?

  • Randbemerkung: Ihre fetch Anruf fehlt ein Häkchen response.ok; Dies ist so ein häufiger Fehler, den ich geschrieben habe ein Blogbeitrag dazu.

    – TJ Crowder

    15. August 2018 um 13:13 Uhr

Wie liest man eine JSON Datei mit fetch in Javascript
TJ Crowder

Wie kann ich eine lokale JSON-Datei mit Abruffunktion in Javascript lesen?

Wenn Sie versuchen zu lesen http://localhost:8080/Reading/api/file

… dann ist das, was Sie tun, richtig, außer dass Sie das vermissen .ok überprüfen (das ist so ein häufiger Fehler, den ich geschrieben habe ein Blogbeitrag darüber). Da Sie Pfeilfunktionen verwenden, müssen Sie dies auch nicht tun let vm = this; es sei denn, Sie bevorzugen es; Pfeilfunktionen vorbei schließen this. Damit:

readJson () {
   // http://localhost:8080
   fetch('/Reading/api/file')
   .then(response => {
       if (!response.ok) {
           throw new Error("HTTP error " + response.status);
       }
       return response.json();
   })
   .then(json => {
       this.users = json;
       //console.log(this.users);
   })
   .catch(function () {
       this.dataError = true;
   })
}

Es ist wichtig, sich daran zu erinnern, dass dies der Fall ist asynchron; readJson kehrt vorher zurück this.users hat den Wert; es wird es bekommen später. Wenn Sie wissen möchten, wann es soweit ist, Rückkehr das Versprechen also aufrufenden Code verwenden kann then darauf:

readJson () {
   // http://localhost:8080
   return fetch('/Reading/api/file')
   // ...

Mehr in den Antworten auf diese Fragen:

  • Wie gebe ich die Antwort von einem asynchronen Aufruf zurück?
  • Warum bleibt meine Variable unverändert, nachdem ich sie innerhalb einer Funktion geändert habe? – Asynchrone Codereferenz

Wenn Sie versuchen zu lesen /Reading/api/file aus dem Dateisystem

… dann können Sie zumindest in einigen Browsern nicht, es sei denn, Sie stellen die Datei über einen Webserverprozess bereit (da Sie die Seite anscheinend bereitstellen. Dann lesen Sie sie über eine URL auf diesem Serverprozess, wie oben gezeigt.

Um eine lokale Datei anderweitig zu lesen, muss der Benutzer die Datei identifizieren, indem er sie entweder in einer input type="file" oder in eine Dropzone ziehen. Dann würden Sie es über die lesen Datei-APInicht fetch.

  • Das Beispiel lässt es so aussehen, als würde es serviert http://localhost:8080/Reading/api/filedaher bin ich mir nicht sicher, ob diese Antwort anwendbar ist.

    – zzzzBov

    15. August 2018 um 13:13 Uhr

  • @zzzzBov – Ich total vermisste diesen Kommentar in der Quelle, danke. Aber es hört sich so an, als ob das OP das hosten könnte Seite dort, aber versuchen, eine lokale Datei zu lesen, nicht eine Datei auf dem Server.

    – TJ Crowder

    15. August 2018 um 13:14 Uhr

  • Ja, es ist sicherlich mehrdeutig. Ich habe eine Vermutung, dass dies ein Dupe von “Wie gebe ich die Antwort von einem asynchronen Aufruf zurück?”.

    – zzzzBov

    15. August 2018 um 13:15 Uhr

  • @zzzzBov – Könnte gut sein. Ich habe die Antwort korrigiert, nochmals vielen Dank.

    – TJ Crowder

    15. August 2018 um 13:17 Uhr

Da ist das ganz Einfache API abrufen:

Sie verwenden es einfach durch:

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

  • Was sie tun, einschließlich der Tatsache, dass Sie das verpassen .ok überprüfen Sie genau wie das OP ist.

    – TJ Crowder

    15. August 2018 um 13:14 Uhr

  • sie geben die Antwort nicht zurück.json();

    – Barr J

    15. August 2018 um 13:15 Uhr

  • Ja, das tun sie. Sie verwenden a prägnant Pfeilfunktion. Das hat eine implizite return.

    – TJ Crowder

    15. August 2018 um 13:18 Uhr

  • Ich möchte die JSON-Datei lokal lesen, oder wenn ich es genau sagen muss, muss eine Eigenschaft vorhanden sein, die besagt, dass if property = true , dann die lokale JSON-Datei (mit Dump-Daten) geladen wird, sonst die JSON-Daten vom Tomcat-Server geladen werden

    – BRRusev

    17. August 2018 um 11:12 Uhr

  • Ich habe es getan, indem ich die URL explizit als localhost:3000/ gebildet habe. Hat funktioniert!

    – Channa

    1. Juli 2020 um 5:36 Uhr

998120cookie-checkWie liest man eine JSON-Datei mit fetch() in Javascript?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy