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

Vue hybride

Discussions similaires

Partager

Partager