Javascript 详细信息 json

Question

I'm a beginner in Javascript and I've given myself the challenge to create an online sales site.我是 Javascript 的初学者，我给自己提出了创建在线销售网站的挑战。 I use the fakestore.com API to generate products.我使用 fakestore.com API 生成产品。 For the moment my javascript code looks like this:目前我的 javascript 代码如下所示：

 var meilleuresVentes = document.getElementById('mVentes'); var test = document.getElementById('test'); //request to recover the json of fakestore.com products var requestURL = 'https://fakestoreapi.com/products'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var superHeroes = request.response; mVentes(superHeroes) } //function to create a card with the information on the first 3 products function mVentes(prod) { for (var i = 0; i < 3; i++) { var card = document.createElement('article'); var image = document.createElement('img'); var title = document.createElement('h3'); var description = document.createElement('p'); var price = document.createElement('h4'); var button = document.createElement('button'); title.textContent = prod[i]['title']; image.src = prod[i]['image']; price.textContent = prod[i]['price']+ " €"; button.textContent = "Add to cart"; //as the descriptions were too long the following code allows to keep only the first 100 letters var desc = prod[i]['description']; var text = ""; for(var b = 0; b < 100; b++) { var text = text + desc[b] } description.textContent = text + "..."; card.appendChild(image); card.appendChild(title); card.appendChild(description); card.appendChild(price); card.appendChild(button); meilleuresVentes.appendChild(card); } }

 @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;800&display=swap'); body{ padding: 0; margin: 0; font-family: 'Kumbh Sans', sans-serif; } header{ display: flex; padding: 20px; align-items: center; position: sticky; top: 0px; background-color: white; z-index: 1; }.hleft{ display: flex; align-items: center; margin-left: auto; padding: 10px; width: 20%; justify-content: end; } ul{ display: flex; list-style-type: none; width: 50%; justify-content: start; margin-right: auto; } li { margin-right: 10px; }.logo{ width: 24%; }.avatar{ object-fit: contain; height: 50px; margin-left: 20%; } h1{ font-size: 55px; } h2{ font-size: 35px; margin: 70px; }.accueil{ margin-inline: 10%; display: flex; align-items: center; }.right{ width: 50%; justify-content: end; }.left{ width: 50%; }.imgaccueil{ width: 90%; border-radius: 10px; margin-top: 10%; margin-bottom: auto; margin-left: 40px; max-width: 400px; height: 100%; }.baseline{ display: flex; position: relative; bottom: 50px; }.fleche{ position: relative; top: 21px; margin-right: 10px; } #mVentes img{ border-radius: 10px; width: 100%; max-height: 400px; } article{ width: 20%; background-color: beige; padding: 20px; margin-inline: 20px; height: 100%; border-radius: 20px; font-size: 12px; } #mVentes{ display: flex; margin-inline: auto; justify-content: space-around; } #mVentes button{ background-color: orangered; color: white; border: none; width: 100%; padding: 5px; border-radius: 10px; } #mVentes h4{ color: green; }

 <,DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Sneakers-Buy a shoes</title> <link rel="stylesheet" href="style/styleindex.css"> <script src="script:js" defer></script> </head> <body> <header> <svg class="logo" width="138" height="20" xmlns="http.//www.w3.org/2000/svg"><path d="M8.217 20c4.761 0 7.519-.753 7.519-4.606 0-3.4-3.38-4.172-6.66-4.682l-.56-.085-.279-.041-.35-.053c-2.7-.405-3.18-.788-3.18-1.471 0-.478.49-1.331 2.843-1.331 2.455 0 3.493.647 3.493 1.87v.134h4.281v-.133c0-2.389-1.35-5.238-7.774-5.238-5.952 0-7.201 2.584-7.201 4.752 0 3.097 2.763 4.086 7.223 4.675.21.028.433.054.659.081 1.669.197 3.172.42 3.172 1.585 0 1.01-1.615 1.222-3.298 1.222-2.797 0-3.784-.593-3.784-1.92v-.134H.002L0 14.926v.317c.008.79.118 1.913 1.057 2.862C2.303 19.362 4.712 20 8.217 20Zm13.21 0v-7.49c0-2.104.547-4.423 4.176-4.423 3.915 0 3.778 2.777 3.768 4.042V20h4.18v-7.768c0-2.264-.176-7.766-6.732-7.766-2.778 0-4.192.911-5.195 2.28h-.197V4.467H17.22V20h4.207Zm21.959 0c5.094 0 7.787-2.07 8.217-5.405H47.53c-.386 1.02-1.63 1.72-4.143 1.72-2.721 0-3.962-1.03-4.25-3.106h12.527c.24-2.13-.029-5.417-3.026-7.44v.005c-1.312-.915-3.056-1.465-5.251-1.465-5.24 0-8.336 2.772-8.336 7.845 0 5.17 3.02 7.846 8.336 7.846Zm4.099-9.574h-8.188c.486-1.574 1.764-2.431 4.089-2.431 2.994 0 3.755 1.267 4.099 2.431ZM70.499 20V4.457H66.29V6.74h-.176c-1.053-1.377-2.809-2.283-5.677-2.283-6.433 0-7.225 5.293-7.253 7.635v.137c0 2.092.732 7.771 7.241 7.771 2.914 0 4.684-.818 5.734-2.169h.131V20H70.5Zm-8.854-3.623c-3.996 0-4.447-3.032-4.447-4.148 0-1.21.426-4.148 4.455-4.148 3.631 0 4.374 2.044 4.374 4.148 0 2.35-.742 4.148-4.382 4.148ZM88.826 20l-6.529-9.045 6.588-6.488h-5.827l-6.836 6.756V0h-4.187v19.954h4.187V16.94l3.02-2.976L83.6 20h5.226Zm9.9 0c5.094 0 7.786-2.07 8.217-5.405h-4.074c-.387 1.02-1.63 1.72-4.143 1.72-2.721 0-3.962-1.03-4.25-3.106h12.527c.24-2.13-.029-5.417-3.026-7.44v.005c-1.312-.915-3.057-1.465-5.251-1.465-5.24 0-8.336 2.772-8.336 7.845 0 5.17 3.02 7.846 8.336 7.846Zm4.098-9.574h-8.187c.485-1.574 1.763-2.431 4.089-2.431 2.994 0 3.755 1.267 4.098 2.431ZM112.76 20v-6.97c0-2.103.931-4.542 4.05-4.542 1.33 0 2.393.236 2.785.346l.67-3.976c-.728-.16-1.626-.392-2.757-.392-2.665 0-3.622.794-4.486 2.282h-.262V4.466h-4.21V20h4.21Zm17.221 0c4.761 0 7.519-.753 7.519-4.606 0-3.4-3.38-4.172-6.66-4.682l-.56-.085-.279-.041-.349-.053c-2.701-.405-3.181-.788-3.181-1.471 0-.478.49-1.331 2.843-1.331 2.455 0 3.493.647 3.493 1.87v.134h4.282v-.133c0-2.389-1.35-5.238-7.775-5.238-5.952 0-7.201 2.584-7.201 4.752 0 3.097 2.763 4.086 7.224 4.675.21.028.432.054.658.081 1.669.197 3.172.42 3.172 1.585 0 1.01-1.615 1.222-3.298 1.222-2.796 0-3.784-.593-3.784-1.92v-.134h-4.319l-.001.301v.317c.008.79.117 1.913 1.056 2.862 1.246 1.257 3.655 1.895 7.16 1:895Z" fill="#1D2026" fill-rule="nonzero"/></svg> <ul> <li>Collections</li> <li>Men</li> <li>Women</li> <li>About</li> <li>Contact</li> </ul> <div class="hleft"> <svg width="22" height="20" xmlns="http.//www.w3.org/2000/svg"><path d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0.817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z" fill="#69707D" fill-rule="nonzero"/></svg> <img class="avatar"src="images/image-avatar:png" alt="image of the avatar"> </div> </header> <hr> <section class="accueil"> <div class="left"> <h1>Welcome to the best website to buy sneakers</h1> <div class="baseline"> <svg class="fleche" width="12" height="18" xmlns="http.//www.w3.org/2000/svg"><path d="M11 1 3 9l8 8" stroke="#1D2026" stroke-width="3" fill="none" fill-rule="evenodd"/></svg> <h5>View our collections</h5> </div> </div> <div class="right"> <img class="imgaccueil" src="images/image-product-1.jpg" alt=""> </div> </section> <h2>Meilleures ventes</h2> <div id="mVentes"> </div> <div id="test"></div> </body> </html>

I would like that when I press the button the program adds the product in the cart but I can't get the information of the product.我希望当我按下按钮时，程序会将产品添加到购物车中，但我无法获取产品信息。 Thanks for your help.谢谢你的帮助。 PS I am French so sorry if the translations are not optimal..: :/ PS 我是法语，如果翻译不是最佳的，我很抱歉..: :/

Answer 1

we can keep the id of the product as a data-attribute on the card.我们可以将产品的 ID 作为数据属性保存在卡片上。

While adding a product to the cart we can get the product-id from the data-attribute as explained below code and can either make an API call ( https://fakestoreapi.com/products/{id} ) example https://fakestoreapi.com/products/1 or in case we are caching the results of API, can filter the items based on product id.在将产品添加到购物车时，我们可以从数据属性中获取产品 ID，如下面的代码所述，并且可以拨打 API 电话 ( https://fakestoreapi.com/products/{id} ) 例如https:// fakestoreapi.com/products/1或者如果我们正在缓存 API 的结果，可以根据产品 ID 过滤项目。 HTML HTML

<article data-id="1">
<img src="example-image" alt="product-image" />
  <h3>title</h3>
  <p>description</p>
  <h4>$123</h4>
  <button onClick="addToCart(event)">
    Add to cart
  </button>
</article>

JS JS

function addToCart(e){
    const id = e.target.parentNode.dataset.id;
    const url = `https://fakestoreapi.com/products/${id}`;
    //make api call or get from cache and handle logic for cart display
}

Javascript 详细信息 json

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-04-20 16:10:12

Javascript 详细信息 json

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-04-20 16:10:12

解决方案1
0 已采纳 2022-04-20 16:10:12