problème API

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
hakmiller
Messages : 2
Enregistré le : 18 oct. 2021, 00:00

problème API

Message par hakmiller » 18 oct. 2021, 00:13

Bonjour à tous,

Petit novice en JS que je suis, j'ai un petit problème avec mon API, je suis en train de dynamiser un site de vente de canapé mais peu importe sur quel canapé je clique, il m'affiche les information du premier de la liste...
C'est sûrement quelque chose de simple mais pour le coup ça a l'air de m'échapper.

Toute aide est la bienvenue.

Merci beaucoup

Code : Tout sélectionner

 ******HTML******

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Kanap</title>

    <meta charset="utf-8">
    <meta name="description" content="Plateforme incroyable de e-commerce">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet" />


    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <header>
      <div class="limitedWidthBlockContainer informations">
        <div class="limitedWidthBlock">
          <ul>
            <li><img src="images/icons/phone.svg" alt="logo de téléphone" class="informations__phone">01 23 45 67 89</li>
            <li><img src="images/icons/mail.svg" alt="logo d'une enveloppe" class="informations__mail">support@name.com</li>
            <li><img src="../images/icons/adress.svg" alt="logo d'un point de géolocalisation" class="informations__address">01 23 45 67 89</li>
          </ul>
        </div>
      </div>
      <div class="limitedWidthBlockContainer menu">
        <div class="limitedWidthBlock">
          <a href="./index.html">
            <img class="logo" src="../images/logo.png" alt="Logo de l'entreprise">
          </a>
          <nav>
            <ul>
              <a href="./index.html"><li>Accueil</li></a>
              <a href="./cart.html"><li>Panier</li></a>
            </ul>
          </nav>
        </div>
      </div>
      <img class="banniere" src="../images/banniere.png" alt="Baniere">
    </header>

    <main class="limitedWidthBlockContainer">
      <div class="limitedWidthBlock">
        <div class="titles">
          <h1>Nos produits</h1>
          <h2>Une gamme d'articles exclusifs</h2>
        </div>
        <section class="items" id="items">
<a href="./product.html?id=42">
            <article>
              <img src="images/kanap01.jpeg" alt="Lorem ipsum dolor sit amet, Kanap name1">
              <h3 class="productName">Kanap name1</h3>
              <p class="productDescription">Dis enim malesuada risus sapien gravida nulla nisl arcu. Dis enim malesuada risus sapien gravida nulla nisl arcu.</p>
            </article>
          </a>
        </section>
      </div>
    </main>
    
    <footer>
      <div class="limitedWidthBlockContainer footerMain">
        <div class="limitedWidthBlock">
          <div>
            <img class="logo" src="../images/logo.png" alt="Logo de l'entreprise">
          </div>
          <div>
            <p>10 quai de la charente <br>75019 Paris 19</p>
          </div>
          <div>
            <p>Téléphone : 01 23 45 67 89</p>
          </div>
          <div>
            <p>Email : support@name.com</p>
          </div>
        </div>
      </div>
      <div class="limitedWidthBlockContainer footerSecondary">
        <div class="limitedWidthBlock">
          <p>© Copyright 2021 - 2042 | Openclassrooms by Openclassrooms | All Rights Reserved | Powered by <3</p>
        </div>
      </div>
    </footer>
  <script src="script.js"></script>
  </body>
</html>

Code : Tout sélectionner

 ******JAVASCRIPT******


const products = [
    {
      "colors": ["Blue", "White", "Black"],
      "_id": "107fb5b75607497b96722bda5b504926",
      "name": "Kanap Sinopé",
      "price": 1849,
      "imageUrl": "kanap01.jpeg",
      "description": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "altTxt": "Photo d'un canapé bleu, deux places"
    },
    {
      "colors": ["Black/Yellow", "Black/Red"],
      "_id": "415b7cacb65d43b2b5c1ff70f3393ad1",
      "name": "Kanap Cyllène",
      "price": 4499,
      "imageUrl": "kanap02.jpeg",
      "description": "Morbi nec erat aliquam, sagittis urna non, laoreet justo. Etiam sit amet interdum diam, at accumsan lectus.",
      "altTxt": "Photo d'un canapé jaune et noir, quattre places"
    },
    {
      "colors": ["Green", "Red", "Orange"],
      "_id": "055743915a544fde83cfdfc904935ee7",
      "name": "Kanap Calycé",
      "price": 3199,
      "imageUrl": "kanap03.jpeg",
      "description": "Pellentesque fermentum arcu venenatis ex sagittis accumsan. Vivamus lacinia fermentum tortor.Mauris imperdiet tellus ante.",
      "altTxt": "Photo d'un canapé d'angle, vert, trois places"
    },
    {
      "colors": ["Pink", "White"],
      "_id": "a557292fe5814ea2b15c6ef4bd73ed83",
      "name": "Kanap Autonoé",
      "price": 1499,
      "imageUrl": "kanap04.jpeg",
      "description": "Donec mattis nisl tortor, nec blandit sapien fermentum at. Proin hendrerit efficitur fringilla. Lorem ipsum dolor sit amet.",
      "altTxt": "Photo d'un canapé rose, une à deux place"
    },
    {
      "colors": ["Grey", "Purple", "Blue"],
      "_id": "8906dfda133f4c20a9d0e34f18adcf06",
      "name": "Kanap Eurydomé",
      "price": 2249,
      "imageUrl": "kanap05.jpeg",
      "description": "Ut laoreet vulputate neque in commodo. Suspendisse maximus quis erat in sagittis. Donec hendrerit purus at congue aliquam.",
      "altTxt": "Photo d'un canapé gris, trois places"
    },
    {
      "colors": ["Grey", "Navy"],
      "_id": "77711f0e466b4ddf953f677d30b0efc9",
      "name": "Kanap Hélicé",
      "price": 999,
      "imageUrl": "kanap06.jpeg",
      "description": "Curabitur vel augue sit amet arcu aliquet interdum. Integer vel quam mi. Morbi nec vehicula mi, sit amet vestibulum.",
      "altTxt": "Photo d'un canapé gris, deux places"
    },
    {
      "colors": ["Red", "Silver"],
      "_id": "034707184e8e4eefb46400b5a3774b5f",
      "name": "Kanap Thyoné",
      "price": 1999,
      "imageUrl": "kanap07.jpeg",
      "description": "EMauris imperdiet tellus ante, sit amet pretium turpis molestie eu. Vestibulum et egestas eros. Vestibulum non lacus orci.",
      "altTxt": "Photo d'un canapé rouge, deux places"
    },
    {
      "colors": ["Pink", "Brown", "Yellow", "White"],
      "_id": "a6ec5b49bd164d7fbe10f37b6363f9fb",
      "name": "Kanap orthosie",
      "price": 3999,
      "imageUrl": "kanap08.jpeg",
      "description": "Mauris molestie laoreet finibus. Aenean scelerisque convallis lacus at dapibus. Morbi imperdiet enim metus rhoncus.",
      "altTxt": "Photo d'un canapé rose, trois places"
    }
];







for (product of products) {
  //Variables//
  let productId = product._id;
  let link = './product.html?id=' + productId;
  let item = document.createElement('section')
  let productLink = document.createElement("a");
  let article = document.createElement('article');
  let title = document.createElement('h3');
  let productDescription = product.description;
  let productPicLink = product.imageUrl;
  let productPic = document.createElement ('img');
  
 

 

  document.getElementById('items').appendChild(item)
  item.setAttribute('id', productId);
  item.classList.add("items_")
  document.getElementById(productId).appendChild(article);
  productPic.setAttribute('src', '../images/' + productPicLink);
  productPic.classList.add('itemPic');
  document.getElementById(productId).appendChild(title);
  document.getElementById(productId).appendChild(productPic);
  productLink.setAttribute('href', link);
  productLink.innerHTML = productDescription;
  document.getElementById(productId).appendChild(productLink);
  title.innerHTML = product.name;
  
}





Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: problème API

Message par webmaster » 18 oct. 2021, 10:06

Bonjour,

Il faudrait consulter le retour de l'API, avec la console du navigateur par exemple :
https://www.toutjavascript.com/savoir/n ... script.php

C'est surement à ce moment que le contenu n'est pas correctement chargé.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

hakmiller
Messages : 2
Enregistré le : 18 oct. 2021, 00:00

Re: problème API

Message par hakmiller » 18 oct. 2021, 12:26

Bonjour,

Ah super je vais regarder ça merci!

Autre petite question bête :D est-il obligatoire d'utiliser fetch pour l'API? elle ne doit pas être avec le reste du code c'est ça?

Merci beaucoup

Répondre