Advanced Typescript
Typage au runtime

kebabApi

Nettoyer les données d'une API claquée avec zod

L'API interne du site du cours (/api/kebabApi) est connue pour être peu fiable. Elle retourne une liste de produits, mais certaines entrées sont mal formatées ou incomplètes. Notre mission est de récupérer cette liste et de n'afficher que les produits valides.

Créer le Schéma Zod

Définissez un ProductSchema qui représente la forme d'un produit valide.
Un produit doit avoir :

  • id: un number
  • name: un string non vide
  • price: un number positif
  • inStock: un boolean

Récupérer les données

Faites un fetch sur l'URL /api/kebabApi pour obtenir le tableau de produits bruts.

Filtrer et valider les données

Utilisez votre ProductSchema pour parcourir le tableau de données brutes.
Créez un nouveau tableau qui ne contient que les produits qui passent la validation de Zod.

Afficher le résultat

Dans votre page, affichez uniquement la liste des produits propres et validés.
Sur les 5 produits retournés par l'API, seuls 2 devraient s'afficher.