Défi : Rendre une Collection de Données
Tâche : Afficher une liste de produits
Gérons les données obtenues du backend et assurons-nous de leur rendu correct sous forme de liste.
La tâche est :
- Utiliser la méthode
map()
pour rendre un tableau de produits. - Assurez-vous de combler les lacunes nécessaires :
h2
doit contenir le nom du produit (propriéténame
);p
doit contenir la description du produit (propriétédescription
);span
doit contenir la chaîne "Prix :" et le prix du produit (propriétéprice
).
- Utilisez la méthode
map()
pour parcourir le tableauprops.goods
. - Assurez-vous de définir la propriété
key
de l'élément<li>
sur une valeur unique, telle que la propriété id de l'élément. - À l'intérieur de chaque élément
<li>
, utilisez les éléments suivants :- Un élément
<h2>
pour afficher le nom du produit. Accédez au nom à partir de l'item
actuel ; - Un élément
<p>
pour afficher la description du produit. Accédez à la description à partir de l'item
actuel ; - Un élément
<span>
pour afficher la chaîne "Prix :" suivie du prix du produit. Accédez au prix à partir de l'item
actuel.
- Un élément
Tout était clair ?
Merci pour vos commentaires !
Section 1. Chapitre 15
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Défi : Rendre une Collection de Données
Glissez pour afficher le menu
Tâche : Afficher une liste de produits
Gérons les données obtenues du backend et assurons-nous de leur rendu correct sous forme de liste.
La tâche est :
- Utiliser la méthode
map()
pour rendre un tableau de produits. - Assurez-vous de combler les lacunes nécessaires :
h2
doit contenir le nom du produit (propriéténame
);p
doit contenir la description du produit (propriétédescription
);span
doit contenir la chaîne "Prix :" et le prix du produit (propriétéprice
).
- Utilisez la méthode
map()
pour parcourir le tableauprops.goods
. - Assurez-vous de définir la propriété
key
de l'élément<li>
sur une valeur unique, telle que la propriété id de l'élément. - À l'intérieur de chaque élément
<li>
, utilisez les éléments suivants :- Un élément
<h2>
pour afficher le nom du produit. Accédez au nom à partir de l'item
actuel ; - Un élément
<p>
pour afficher la description du produit. Accédez à la description à partir de l'item
actuel ; - Un élément
<span>
pour afficher la chaîne "Prix :" suivie du prix du produit. Accédez au prix à partir de l'item
actuel.
- Un élément
Tout était clair ?
Merci pour vos commentaires !
Section 1. Chapitre 15