Response : méthode json()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.
Note : Cette fonctionnalité est disponible via les Web Workers.
La méthode json() de l'interface Response lit un flux de réponse jusqu'à son terme. Elle retourne une promesse qui est résolue avec le résultat de l'analyse du texte du corps en tant que JSON.
Notez que, bien que la méthode s'appelle json(), le résultat n'est pas du JSON mais le résultat de l'analyse du JSON en entrée pour produire un objet JavaScript.
Syntaxe
json()
Paramètres
Aucun.
Valeur de retour
Une Promise qui se résout en un objet JavaScript. Cet objet peut être tout ce qui peut être représenté par du JSON — un objet, un tableau, une chaîne de caractères, un nombre…
Exceptions
AbortErrorDOMException-
La requête a été annulée.
TypeError-
Levée pour l'une des raisons suivantes :
- Le corps de la réponse est perturbé ou verrouillé.
- Une erreur est survenue lors du décodage du contenu du corps (par exemple parce que l'en-tête HTTP
Content-Encodingest incorrect).
SyntaxError-
Le corps de la réponse ne peut pas être analysé comme JSON.
Exemples
Dans notre exemple fetch JSON (angl.) (voir l'exécution en direct (angl.)), nous créons une nouvelle requête avec le constructeur Request(), puis l'utilisons pour récupérer un fichier .json.
Lorsque la récupération réussit, nous lisons et analysons les données avec json(), puis lisons les valeurs des objets résultants comme attendu et les insérons dans des éléments de liste pour afficher nos données produit.
const maListe = document.querySelector("ul");
const maRequete = new Request("produits.json");
fetch(maRequete)
.then((response) => response.json())
.then((donnees) => {
for (const produit of donnees.products) {
const elementListe = document.createElement("li");
elementListe.appendChild(document.createElement("strong")).textContent =
produit.Name;
elementListe.append(` se trouve dans ${produit.Location}. Coût : `);
elementListe.appendChild(document.createElement("strong")).textContent =
`${produit.Price} €`;
maListe.appendChild(elementListe);
}
})
.catch(console.error);
Spécifications
| Specification |
|---|
| Fetch # ref-for-dom-body-json① |
Compatibilité des navigateurs
Voir aussi
- L'API ServiceWorker
- Contrôle d'accès HTTP (CORS)
- La référence HTTP