Body.json()

La méthode json() de Body lit un Stream Response jusqu'au bout. Elle retourne une promesse qui s'auto-résout en renvoyant le corps de la requête parsée au format JSON.

Syntaxe

response.json().then(function(data) {
  // faire quelque chose avec les données
});

Paramètres

Aucun.

Valeur de retour

Une promesse résolue contenant le corps de la requête (au format JSON) converti sous la forme d'un objet JavaScript. Cet objet peut correspondre à n'importe quel contenu représentable dans le format JSON -- un objet, un tableau, une chaîne de caractère, un nombre…

Exemple

Dans l'exemple fetch json (lancer cet exemple), nous créons une nouvelle requête en utilisant le constructeur Request(), puis utilisons celle-ci pour récupérer un fichier .json. Lorsque l'appel à fetch réussit, on lit les données et on les parse en utilisant json() pour les convertir en un objet JS, puis enfin on utilise les valeurs de l'objet obtenu pour les insérer dans une liste de noeuds, de manière à afficher nos produits. 

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) {
      let 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);
    }
  });

Spécifications

Spécification Status Comment
Fetch
La définition de 'Body.json()' dans cette spécification.
Standard évolutif Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
json
Expérimentale
Chrome Support complet 42
Support complet 42
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet ≤18Firefox Support complet 39
Support complet 39
Support complet 34
Désactivée
Désactivée From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 29
Support complet 29
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Support complet 10.1WebView Android Aucun support NonChrome Android Support complet 42Firefox Android Aucun support NonOpera Android Support complet 29
Support complet 29
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi