Aller au contenu

Trouver une donnée dans un JSON

L'essentiel en 3 points

  1. Une réponse d'API, c'est des objets dans des tableaux dans des objets. Votre donnée est quelque part au fond : pour l'atteindre, on écrit son chemin.
  2. On avance de l'extérieur vers l'intérieur : .cle pour un objet { }, [0] pour un tableau [ ], et des crochets pour une clé avec un tiret.
  3. Une étape à la fois : le premier undefined vous montre où le chemin casse.

La méthode

À chaque niveau, regardez le symbole qui ouvre la valeur :

Vous voyez... C'est... Vous écrivez... Exemple
{ un objet . et le nom de la clé data.sprites
[ un tableau [ et la position, à partir de 0 data.types[0]
une clé avec un tiret un objet, mais... des crochets et des guillemets data.sprites.other["official-artwork"]

Avancez une étape à la fois. Le premier undefined vous montre où le chemin casse.

Un exemple : la PokéAPI

Ouvrez pokeapi.co/api/v2/pokemon/pikachu dans Firefox, qui affiche le JSON avec des triangles pour plier et déplier (voir Firefox, plus bas). La réponse est longue! Voici quatre chemins, du plus simple au plus difficile :

data.name
// "pikachu" : une clé, directement dans l'objet

data.sprites.front_default
// l'image : un objet (sprites), puis une clé

data.types[0].type.name
// "electric" : un tableau (types), sa 1re case, un objet, une clé

data.sprites.other["official-artwork"].front_default
// la grande image : la clé a un tiret, donc des crochets

Le piège du tiret

data.sprites.other.official-artwork ne fonctionne pas : JavaScript lit le tiret comme une soustraction (official moins artwork). Dès qu'une clé contient un tiret ou une espace, on passe aux crochets : ["official-artwork"].

À vous : tester vos chemins

La démo charge la réponse de la PokéAPI. Essayez les chemins proposés, du plus simple au plus difficile, puis les deux versions du piège du tiret.

Défi : les points de vie (hp) de Pikachu

Dans le champ Le chemin de la démo ci-dessus, trouvez le chemin qui donne le nombre de points de vie de Pikachu : la démo doit afficher 35.

Indice : cherchez stats dans la réponse. C'est un tableau d'objets. Le nom de la statistique ("hp") vous dit dans quelle case regarder, mais ce n'est pas la valeur que vous cherchez.

Réponse

data.stats[0].base_stat, qui donne 35.

Chaque case du tableau stats est un objet comme celui-ci :

{
  base_stat: 35,        // la valeur : c'est elle qu'on veut
  effort: 0,
  stat: { name: "hp" }  // l'étiquette : elle dit de quelle statistique on parle
}

data.stats[0].stat.name donne "hp" : ça confirme qu'on est dans la bonne case, mais c'est l'étiquette, pas le nombre.

Plusieurs valeurs : map()

data.abilities[0].ability.name donne le nom de la première capacité du Pokémon, et seulement elle. Pour avoir toutes les capacités, on utilise map() : il parcourt un tableau (array) et crée un nouveau tableau, en gardant de chaque élément seulement ce qu'on lui demande.

const abilities = data.abilities.map((item) => item.ability.name);
// ["static", "lightning-rod"]
Avant, après : ce que map() fabrique

Le tableau de départ, data.abilities, contient des objets complets. map() en tire un nouveau tableau, avec seulement les noms. Le tableau de départ, lui, ne change pas.

// Le tableau de départ : data.abilities, des objets complets
[
  { ability: { name: "static", url: "..." }, slot: 1 },
  { ability: { name: "lightning-rod", url: "..." }, slot: 3 }
]

// Le nouveau tableau, créé par map() : seulement les noms
["static", "lightning-rod"]
Comment lire la ligne de code

Pour chaque item du tableau data.abilities, garde item.ability.name. Remarquez que le chemin ne commence plus par data, mais par item : il part d'un seul élément du tableau, pas de toute la réponse.

Voir Récap JS : map().

Voir la réponse : Firefox ou Chrome

  • Firefox : on ouvre l'adresse de l'API, pour explorer avant de coder.
  • Chrome : on ouvre votre page, pour vérifier ce que votre code reçoit vraiment.

Firefox : l'adresse de l'API, seule

Firefox affiche la réponse de la PokéAPI : l'adresse de l'API dans la barre d'adresse, l'onglet JSON, le champ Filtrer le JSON, et le triangle devant abilities pour déplier le tableau. Chaque étape est numérotée de 1 à 4.

  1. Collez l'adresse de l'API dans la barre d'adresse, puis Enter. Par exemple : https://pokeapi.co/api/v2/pokemon/pikachu.
  2. Onglet JSON : la réponse, bien rangée. L'onglet Données brutes montre le texte tel qu'il arrive.
  3. Filtrer le JSON : tapez une clé (par exemple official-artwork) pour la trouver dans une longue réponse.
  4. Le triangle devant une clé déplie un objet { } ou un tableau [ ].

Chrome : la requête de votre page

On ouvre la page qui fait le fetch() (votre récit, ou la démo Pokémon), puis les outils de développement (F12).

Les outils de développement de Chrome, onglet Réseau : le filtre Fetch/XHR, la requête pikachu, l'onglet Aperçu, puis un clic droit sur la valeur name et la commande Copy property path. Chaque étape est numérotée de 1 à 6.

  1. Onglet Réseau (Network). S'il est vide, rechargez la page (F5) : Chrome note seulement les requêtes faites pendant que l'onglet est ouvert.
  2. Filtre Fetch/XHR : il garde seulement les appels d'API, sans les images ni le CSS.
  3. Cliquez sur la requête de votre API (ici, pikachu).
  4. Onglet Aperçu (Preview) : la réponse, en JSON, avec des triangles pour déplier.
  5. Clic droit sur la valeur qui vous intéresse.
  6. Copier le chemin de la propriété (Copy property path). Collez-le dans votre code, après data.

Voir aussi