Trier le catalogue — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 8)

Trier le catalogue

Événements et formulaires · niveau 2

Énoncé

Une liste <select id="tri"> propose de trier les livres par titre, par prix croissant ou par prix décroissant. Écrire le script qui affiche la liste triée au chargement et à chaque changement de choix, en associant à chaque valeur de l'option un comparateur rangé dans un objet.

Corrigé


const livres = [
  { titre: "Physique générale", prix: 59 },
  { titre: "Analyse MPSI", prix: 45 },
  { titre: "L’Étranger", prix: 7.9 },
  { titre: "Introduction à l’algorithmique", prix: 89 },
];

const comparateurs = {
  titre: (a, b) => a.titre.localeCompare(b.titre, "fr"),
  "prix-croissant": (a, b) => a.prix - b.prix,
  "prix-decroissant": (a, b) => b.prix - a.prix,
};

const liste = document.querySelector("#liste");
const tri = document.querySelector("#tri");

function afficher() {
  const tries = livres.toSorted(comparateurs[tri.value]);
  liste.replaceChildren(
    ...tries.map((l) => {
      const li = document.createElement("li");
      li.textContent = `${l.titre} — ${l.prix} €`;
      return li;
    }),
  );
  console.log(tri.value, ":", tries.map((l) => l.prix).join(" "));
}

tri.addEventListener("change", afficher);
afficher();

Au chargement, puis après avoir choisi les deux tris par prix :


titre : 45 89 7.9 59
prix-croissant : 7.9 45 59 89
prix-decroissant : 89 59 45 7.9

L'objet comparateurs évite une cascade de if : la valeur de l'option sert directement de clé. toSorted laisse le tableau d'origine intact, et localeCompare range « L'Étranger » avant « Physique ».