Récupérer un élément API et insérer dans la page produit (dans le

Coucou tout le monde !

J'aurais une question relative à un projet que je suis en train de faire (je suis en formation)

Je bloque un peut sur quelque chose. C'est pour une boutique d'E-Commerce, j'ai ma première page, ou j'ai fait le script pour la création d'une boucle avec tous mes produits, j'ai fait en sorte de pouvoir mettre l'id dans le navigateur pour pouvoir l'avoir quand je clique sur mon produit et atterris sur la page du produit.

Sur cette page j'ai l'Id du produit, que j'ai récupéré (j'ai fait mon console.log pour être sur que je la récupère) on me demande de requêter l'Api pour récupérer les info du produit en question et les insérer dans la page produit (donc que le élément de ma page se remplissent par rapport aux infos récupérées)

        <section class="item">
          <article>
            <div class="item__img">
              <!-- <img src="../images/logo.png" alt="Photographie d'un canapé"> -->
            </div>
            <div class="item__content">

              <div class="item__content__titlePrice">
                <h1 id="title"><!-- Nom du produit --></h1>
                <p>Prix : <span id="price"><!-- 42 --></span>€</p>
              </div>

              <div class="item__content__description">
                <p class="item__content__description__title">Description :</p>
                <p id="description"><!-- Dis enim malesuada risus sapien gravida nulla nisl arcu. --></p>
              </div>

              <div class="item__content__settings">
                <div class="item__content__settings__color">
                  <label for="color-select">Choisir une taille :</label>
                  <select name="color-select" id="colors">
                      <option value="">--SVP, choisissez une couleur --</option>
<!--                       <option value="vert">vert</option>
                      <option value="blanc">blanc</option> -->
                  </select>
                </div>

                <div class="item__content__settings__quantity">
                  <label for="itemQuantity">Nombre d'article(s) (1-100) :</label>
                  <input type="number" name="itemQuantity" min="1" max="100" value="0" id="quantity">
                </div>
              </div>

              <div class="item__content__addButton">
                <button id="addToCart">Ajouter au panier</button>
              </div>

            </div>
          </article>
        </section>

fetch("http://localhost:3000/api/products") 
  //Catch data i need from the api 

  .then(data =>data.json())
  
  const queryString_url_id = window.location.search;
  /*This const is to find a query string who contain '?'*/
  /*Which is followed by URL parameter*/
  /*In this case the "id" parameter*/
  
  const urlSearchParams = new URLSearchParams(queryString_url_id);
  /*This const is here to define i'm gonna work with*/
  /*In this case that will be for my 'get' method*/

  const id = urlSearchParams.get("id");
  //This const is here to gonna catch the "id"

  const idProduitSelectionner = find((products) => products._id === id);
  console.log(idProduitSelectionner)

if (id == idProduitSelectionner) 
  
/*This Function is here to define all element i need to have*/
/*To all the elements i indicated where to find them*/

function createProductsId (product) {
  let itemImg = document.getElementsByClassName('item__Img');
  itemImg.setAttribute('src', product ["imageUrl"]);
  itemImg.setAttribute('alt', product["altText"]);
  /*Gave the attribute src to my image, to indicated the image URL*/
  /*Create contant productsImg who gonna return the img*/
  /*Gave an alt attribute, who gonna contein the description of pictures*/

  let itemTitle = document.getElementById('title');
  itemTitle.textContent = product["name"];
  /*Catch the Id "title"*/
  /*Ask to take the name of the products in product "name"*/

  let itemPrice = document.getElementById('price');
  itemPrice.textContent = product["price"]
  /*Catch itemPrice in product "price"*/
  /*Ask to take the price of the products in product "price"*/

  let itemDescription = document.getElementById('description');  
  itemDescription.textContent = product["description"];
  /*Catch ID description from P element*/
  /*Catch the Elements from "product" description i need*/

  let itemColor = document.querySelector('value');
  itemColor.textContent = product['colors']
};

J'ai commencer à y travailler dessus, mais je pense que je me suis perdus quelque part

Pouvez vous m'apporter votre aide précieuse svp ?
Svp, ne soyez pas trop dur avec moi je débute en JavaScript
et merciii beaucoup à ceux et celle qui liront et répondront à mon message
Modifié par Stephen (20 Oct 2021 - 10:16)

J'ai récupérer l'id du produit,
Il faut que j'arrive à récupérer les info d'un seul produit dans l'api,
et utiliser les info pour qu'elles remplisse les champs de mon html (donc a chaque fois que je clique sur un produit, j'arrive sur ma page produit et je recupére "l'Id" du produit" (jusque la ça va), et la mes éléments html doivent afficher les infos produits.


ça c'est ce qu'on me demande de faire :
? Interroger l’API pour récupérer les détails du produit.
? Insérer ces détails dans la page Produit (dans le DOM).

Merci pour ta réponse

ta une doc qui va avec ton API ? ou juste le js que tu as partagé ?