Response: json() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die json() Methode der Response-Schnittstelle nimmt einen Response-Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, das mit dem Ergebnis der Analyse des Rumpftexts als JSON aufgelöst wird.

Beachten Sie, dass der Name der Methode json() zwar auf JSON hinweist, das Ergebnis jedoch kein JSON ist, sondern das Resultat der Analyse von JSON-Eingaben, um ein JavaScript-Objekt zu erzeugen.

Syntax

js
json()

Parameter

Keine.

Rückgabewert

Ein Promise, das zu einem JavaScript-Objekt aufgelöst wird. Dieses Objekt kann alles sein, was durch JSON dargestellt werden kann — ein Objekt, ein Array, ein String, eine Zahl…

Ausnahmen

DOMException AbortError

Die Anfrage wurde abgebrochen.

TypeError

Ausgelöst aus einem der folgenden Gründe:

SyntaxError

Der Antwortkörper kann nicht als JSON analysiert werden.

Beispiele

In unserem fetch JSON Beispiel (führen Sie fetch JSON live aus), erstellen wir eine neue Anfrage mit dem Request()-Konstruktor und verwenden diese, um eine .json-Datei abzurufen. Wenn das Abrufen erfolgreich ist, lesen und analysieren wir die Daten mit json(), lesen dann die Werte aus den resultierenden Objekten aus, wie Sie es erwarten würden, und fügen sie in Listenelemente ein, um unsere Produktdaten anzuzeigen.

js
const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      const listItem = document.createElement("li");
      listItem.appendChild(document.createElement("strong")).textContent =
        product.Name;
      listItem.append(` can be found in ${product.Location}. Cost: `);
      listItem.appendChild(document.createElement("strong")).textContent =
        `£${product.Price}`;
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);

Spezifikationen

Specification
Fetch
# ref-for-dom-body-json①

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
json

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch