🥷Voici un exemple d'utilisation de ces fonctions JS pour WEB.

Le JS permet d'ajouter un marqueur sur des objets à mettre en avant (ici en rouge) et de les transformer en balises HTML !

Le CSS permet d'affecter les objets dans une grille nommée.

Exemple : Le Panier

Les objets d'un panier triés par catégorie avec le produit le plus cher en rouge https://dupontdenis.github.io/L1ex2025/

Exemple : Les régions

Les villes triées par région avec la ville la plus peuplée en rouge !

https://dupontdenis.github.io/L12025Villes/

🆒Comprendre le sujet : Explications générales

Voici les différentes phases qui permettent de marquer l’élément le plus cher dans chaque catégorie.

Identification des catégories uniques

La fonction findAllCategories(array) crée un tableau contenant toutes les catégories distinctes présentes dans basket.

Ajout du prix total à chaque élément

La fonction addTotalPrice(array) parcourt chaque objet du tableau et calcule son prix total (totalPrice) en multipliant price par quantity.

Détermination du produit le plus cher par catégorie

findMostExpensiveForEachCategory(array, arrayCategory) parcourt chaque catégorie et identifie l'élément avec le plus grand totalPrice.

Marquage des produits les plus chers

markMostExpensive(items) ajoute une propriété mostExpensive = true aux produits identifiés comme étant les plus chers.

Transformation des données

La fonction transformBasket(array) reformate le tableau en ne conservant que les propriétés name, category et mostExpensive.

Génération de la liste HTML (hors examen)

createList(array) génère une liste <ul> avec des éléments <li> et ajoute une classe CSS spécifique aux produits les plus chers.

Ces étapes assurent une structure logique et claire pour identifier les produits les plus chers et les afficher de manière pertinente (pas au programme).

Voici une illustration des résultats attendus

Identification des catégories uniques

Ajout du prix total à chaque élément

Détermination du produit le plus cher par catégorie

Mise à jour des données (ajout d'un attribut)

Transformation des données (Nouveau tableau)

Grâce au CSS, on affecte les objets dans la grille. La magie des grilles nommée avec l'attribut dense est remarquable.

Code

🆘Corrigé

function findAllCategories(array) {
const categories = []; // Initialise un tableau vide pour stocker les catégories
for (const item of array) {
let exists = false; // Initialise une variable pour vérifier si la catégorie existe déjà
for (const category of categories) {
if (category === item.category) {
exists = true; // Si la catégorie existe déjà, on met la variable à true
break; // Sort de la boucle
}
}
if (!exists) {
categories.push(item.category); // Ajoute la catégorie si elle n'est pas déjà présente
}
}
return categories; // Retourne le tableau des catégories
}
const categories = findAllCategories(basket); // Appel de la fonction pour trouver toutes les catégories
console.log(categories); // Affiche les catégories uniques

code

🆘Corrigé

// Add a new attribute `totalPrice` to each object in the basket array
// Use only a `for...of` loop
function addTotalPrice(array) {
for (const item of array) {
item.totalPrice = item.price * item.quantity; // Calculate and add totalPrice
}
}
addTotalPrice(basket); // Add totalPrice to each item in the basket

code

🆘Corrigé

function findMostExpensiveForEachCategory(array, arrayCategory) {
const mostExpensiveItems = []; // Initialize an array for the most expensive items
for (const category of arrayCategory) {
let mostExpensiveItem = null; // Initialize the most expensive item for the category
for (const item of array) {
if (item.category === category) {
// Check if the item belongs to the current category
if (
!mostExpensiveItem ||
item.totalPrice > mostExpensiveItem.totalPrice
) {
mostExpensiveItem = item; // Update the most expensive item
}
}
}
if (mostExpensiveItem) {
mostExpensiveItems.push(mostExpensiveItem); // Add the most expensive item to the array
}
}
return mostExpensiveItems; // Return the array of most expensive items
}
// Call the function to find the most expensive items for each category
// and log the result
const mostExpensiveItems = findMostExpensiveForEachCategory(basket, categories);
console.log(mostExpensiveItems); // Display the most expensive items for each arrayCategory

code

🆘Corrigé

// Add a property to mark the most expensive items
function markMostExpensive(items) {
for (const item of items) {
item.mostExpensive = true; // Mark the item as the most expensive
}
}
markMostExpensive(mostExpensiveItems); // Mark the most expensive items
console.log(mostExpensiveItems);

code

🆘Corrigé

function transformBasket(array) {
const transformedArray = [];
for (const { name, category, mostExpensive } of array) {
transformedArray.push({ name, category, mostExpensive }); // Extract and push the properties
}
return transformedArray;
}
// Call the function and log the transformed basket
const newBasket = transformBasket(basket);