Récupérer les données de l'api et les afficher

Bonjour,

Je n'arrive pas et je ne comprends pas comment afficher sur ma page html mes données récupérés depuis l'api. Je fais ma récupération et j'ai également mis mon liens scripts dans mon html .Mais mes produits ne s'affiche pas cela fait 9 jours que je regardes des tutos mais je ne comprends pas je dois oublier quelque chose. Avez-vous un lien vers une vidéo ou un article qui pourrais m'expliquer quoi faire une fois la requête faites?
Je vous remercie par avance :)

Je mets mon code html pour avoir une idée:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="fr">
<head>
		<meta charset="UTF-8">
		<meta name="robots" content="index, follow">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="https://kit.fontawesome.com/cf7cad016f.js" crossorigin="anonymous"></script>
		<title>Orinoco -Accueil</title>
		<script src="produit.js"></script>
	</head>
	<body>
		<header class="header">
			<img class="header__logo" src="images/logo.png" alt="logo Orinoco">
			<h1 class="header__h1">Bienvenue sur Orinoco</h1>
			<div class="header__validation">
				<a class="header__validation_commande" href="confirmation_de_commande.html"></i>Commandes</a>
				<a class="header__validation_panier" href="panier.html"><i class="fas fa-shopping-cart"></i>&nbsp; Panier</a>
			</div>
		</header>
		<main>
			<h2>Trouvez votre appareil photo vintage</h2>
			<p class="main__text">
				Qui dit photographie dit forcément appareil photo... La gamme de produits présente sur le marché est vaste et 
				propose de nombreuses références.
				Chez Orinoco, vous obtiendrez des modèles à la pointe de la technologie.
			</p>
			<!--essaie tuto-->
			<div class="product_sheet">
				<div class="product_sheet_camera">
 
				</div>
 
			</div>
 
 
			<!--fin d'essai tuto-->
		</main>
		<footer>
			<a href="">À propose de nous</a>
			<a href="">Contactez-nous</a>
		</footer>
		<script src="js/index.js"></script>
 
	</body>
</html>

et mon code sur Javascripts :

Code:

1
2
3
4
5
6
7
let product_sheet = fetch('http://localhost:3000/api/cameras')
  .then(function(response){
    return response.json()
  }).then(function(data){
     console.log(data)
 
});

une fois la demande pour l'api je reçois à la console :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[[object Object] {
  _id: "5be1ed3f1c9d44000030b061",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  imageUrl: "http://localhost:3000/images/vcam_1.jpg",
  lenses: ["35mm 1.4", "50mm 1.6"],
  name: "Zurss 50S",
  price: 49900
}, [object Object] {
  _id: "5be1ef211c9d44000030b062",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  imageUrl: "http://localhost:3000/images/vcam_2.jpg",
  lenses: ["50mm 1.8", "60mm 2.8", "24-60mm 2.8/4.5"],
  name: "Hirsch 400DTS",
  price: 309900
}, [object Object] {
  _id: "5be9bc241c9d440000a730e7",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  imageUrl: "http://localhost:3000/images/vcam_3.jpg",
  lenses: ["25mm 4.5"],
  name: "Franck JS 105",
  price: 209900

Bonjour,
c'est dans le .then qu'il te faut faire appel à ta fonction de construction, ou mettre ton code à la place du console.log().
Code:

1 2 3 4 5 6 7 let product_sheet = fetch('http://localhost:3000/api/cameras') .then(function(response){ return response.json() }).then(function(data){ // appel de ta fonction d'affichage afficheDatas(data); });

Merci @nosmoking pour ta réponse, mais je ne comprends pas comment faire cette fonction pour appeler les 4 produits.

Bonjour,

Il faut boucler sur le retour, voilà un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function afficheDatas(data) {
  data.map(function(produit, index) {
   document
      .querySelector(".product_sheet_camera")
      .insertAdjacentHTML("beforebegin","<div id='"+produit._id+"'>"
      +"<p>Image :<img src='"+produit.imageUrl+"' alt='image_produit' /></p>"
      +"<p>Lenses :"+produit.lenses.join(" , ")+"</p>"
      +"<p>Name :"+produit.name+"</p>"
      +"<p>Price :"+produit.price+"</p>"
      +"</div>");
  });
}

Voir insertAdjacentHTML() Method()

Merci Toufik83 pour ton aide je vais tester ce que tu m'as dit. :)