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

**tony060** · 20/10/2020, 11h08

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 20/10/2020, 15h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

**tony060** · 20/10/2020, 22h41

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

**Toufik83** · 21/10/2020, 16h47

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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()

**tony060** · 22/10/2020, 16h48

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

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

JavaScript

Discussions similaires

Partager

Partager