Ein JSON-fetch-Projekt für eigene Versuche

Für die Anzeige der Produkte und die Anwahl eines Produkts hat die Webseite zwei HTML-Elemente.

<div class="product">
   <div class="category"></div>
   <div class="thumbnail"></div>
   <div class="title"></div>
   <div class="brand"></div>
   <div class="description"></div>
   <div class="discount"></div>
   <div class="price"></div>
   <div class="rating"></div>
   <div class="stock"></div>   
</div>

<div class="select-wrap">
   <select id="products">
   </select>
</div>

showProduct() füllt das HTML-Element class="product" mit den gewünschten Eigenschaften.

const selection = document.querySelector("#products");

function showProduct(option) {
   document.querySelector(".category").innerText = option.category;
   document.querySelector(".thumbnail").innerHTML = `<img src="${option.thumbnail}">`;
   document.querySelector(".title").innerText = option.title;
   document.querySelector(".description").innerText = option.description;
   document.querySelector(".rating").innerText = option.rating;
   document.querySelector(".price").innerText = option.price + " $";
   let sterne = "";
   for (let i=0; i<option.rating; i++) {
      sterne += "★"
   }
   for (let i=option.rating; i<5; i++) {
      sterne += "☆"
   }
   document.querySelector(".rating").innerText = sterne;
}

function fetchProducts() {
   fetch("https://dummyjson.com/products/")
      .then ((response) => response.json ())
      .then ((data) => {
         generateOptions(data.products);
         return data.products;
      })
      .then ((option) => {
         showProduct(option [1]);
         selection.addEventListener("change", (e) => {
            const id = e.target.value;
            showProduct(option [id-1]);
         })
      })
   }

function generateOptions(data) {
   data.forEach((item) => {
      const option = document.createElement("option");
      option.innerText = item.title;
      option.value = item.id;
      selection.append(option);
   });
}

fetchProducts();