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