将按钮集成到 orderedlist 中并使用它来使用 javascript 获取 orderedlist 数据的最佳设计是什么

Question

背景：

我正在从后端获取杂货商品的详细信息，我想要一种设计，可以通过单击按钮将每个商品添加到购物车 "Add To Cart"。我正在如下所示渲染数据，但无法继续。

javaScript 代码：

function displayStoreInventory()
{
    var groceryStoreUrl = "http://127.0.0.1:8080/groceryStore";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        try
        {
            if (this.readyState == 4 && this.status == 200) {
                var itemArray = JSON.parse(this.responseText);
                var list = "<ol id='itemList'>";
                for(var i in itemArray)
                {
                    var l = "<ul>" + 
                        "<li>" + itemArray[i].brand + " : " + itemArray[i].category  + "</li>" +
                        "<li>" + "Price: " + itemArray[i].price + "</li>" +
                        **"<button class=btnAddToCart onclick=addToCart()>Add to Cart</button>**<br><br>" + 
                        "</ul>";
                    list += "<li>" + l + "</li><br><br>";
                }
                list += "</ol>";
                document.getElementById("idDisplayStore").innerHTML = list;
            }
        }
        catch(erMs)
        {
            document.getElementById("idDisplayStore").innerHTML = erMs;
        }
    };
    xhttp.open("GET", groceryStoreUrl, true);
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.send();
}

我在 javaScript 中有另一个功能，用于将商品添加到购物车，我需要实现它，但卡在了那里。

function addToCart()
{
    /* Need to implement this. So that I can send that particular selected Item to backend to add to cart.*/
}

问题：

1.On 点击按钮，只有那个项目应该被发送到购物车。我不知道如何只访问该元素，因为在我的设计中我无法知道单击了哪个按钮。

2.If谁有更好的设计或者link给post解释一下，请提一下。

PS：这不是一个从javascript中的无序列表访问数据的简单问题。我想知道在前端开发中针对此类问题遵循的最佳设计。

Answer 1

通常，您的 JSON.parse(this.responseText)

中的每个后端产品都应该有不同的标识符（它们可以是长数字、字符串 + 数字等）

然后将其作为 data-product-id 应用到您的“添加到购物车”按钮中。从那里删除内联 onClick 函数，这不是好的做法。

然后在您的全局 javascript 文件中添加 eventListerner 以点击添加到购物车按钮，您将在其中获得当前 data-product-id。在你得到这个之后 - 你会知道究竟是哪个产品被点击添加到购物车。

然后根据您的后端逻辑，您可能需要使用此 ID 向服务器发送 ajax 请求，以便让服务器知道该产品已添加到购物车。

如果您有其他问题，请告诉我。

将按钮集成到 orderedlist 中并使用它来使用 javascript 获取 orderedlist 数据的最佳设计是什么

What is the best design to integrate a button in orderedlist and use it to get orderedlist data using javascript

html

javascript

java

frontend

web-frontend