Как лучше всего интегрировать кнопку в упорядоченный список и использовать ее для получения данных упорядоченного списка, используя javascript - PullRequest
Новая
       50

Как лучше всего интегрировать кнопку в упорядоченный список и использовать ее для получения данных упорядоченного списка, используя javascript

0 голосов
/ 29 апреля 2020

СПРАВОЧНАЯ ИНФОРМАЦИЯ:

Я получаю информацию о товаре из бэкэнда, и я хочу, чтобы каждый из них добавлялся в корзину при нажатии кнопки «Добавить в корзину». Я отображаю данные, как показано ниже, но не могу двигаться вперед.

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. При нажатии на кнопку, только этот элемент должен быть отправлен в корзину. Я не знаю, как получить доступ только к этому элементу, так как в моем дизайне у меня нет возможности узнать, какая кнопка была нажата.

2. Если у кого-то есть лучший дизайн или ссылка на пост, объясняющий то же самое, пожалуйста, упомяните.

PS: Это не простой вопрос для доступа к данным из неупорядоченного списка в javascript. Я хочу знать, какой лучший дизайн использовался при разработке внешнего интерфейса для такого рода проблем.

...