Les nouveautés — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 10)

Les nouveautés

Dialoguer avec un serveur : fetch · niveau 2

Énoncé

Une page contient un paragraphe et une liste vide :


<p id="etat" role="status">Chargement…</p>
<ul id="nouveautes"></ul>

Écrire son script. Il demande les livres au serveur, garde les nouveautés (propriété nouveaute), les trie du moins cher au plus cher, et affiche une ligne « titre — prix » par livre, le prix au format français ; puis « 3 nouveautés. » dans le paragraphe d'état. En cas d'échec, le paragraphe dit que les nouveautés sont indisponibles. Vérifier avec le serveur lancé normalement, puis avec --panne=1.

Corrigé


const etat = document.querySelector("#etat");
const liste = document.querySelector("#nouveautes");
const euros = new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" });

try {
  const reponse = await fetch("/api/livres");
  if (!reponse.ok) {
    throw new Error(`erreur HTTP ${reponse.status}`);
  }
  const livres = await reponse.json();
  const nouveautes = livres.filter((l) => l.nouveaute).sort((a, b) => a.prix - b.prix);
  for (const livre of nouveautes) {
    const ligne = document.createElement("li");
    ligne.textContent = `${livre.titre} — ${euros.format(livre.prix)}`;
    liste.append(ligne);
  }
  etat.textContent = `${nouveautes.length} nouveautés.`;
} catch (e) {
  etat.textContent = `Les nouveautés sont indisponibles (${e.message}).`;
}

Dans Chromium, la page (exercices/ex10-nouveautes/) affiche « Programmation Java — 32,00 € », « Analyse MPSI — 45,00 € », « Introduction à l’algorithmique — 89,00 € » et « 3 nouveautés. » ; avec --panne=1, « Les nouveautés sont indisponibles (erreur HTTP 500). ». Le comparateur a.prix - b.prix est indispensable : sans lui, sort comparerait des chaînes (chapitre 5). On utilise textContent, jamais innerHTML, pour du texte venu du serveur (chapitre 7).