Здесь есть несколько вопросов, поэтому я просто дам вам основы ниже. Я предполагаю, что вы используете asyn c выше, чтобы убедиться, что у вас есть данные, доступные перед обновлением DOM.
Я только что создал список, который, когда вы нажимаете на элемент списка, будет предупреждать product_id Вы только что нажали.
Используя базис c для l oop, мы l oop над продуктами в данных, и для каждого элемента создаем новый элемент li.
Мы устанавливаем атрибут данных для каждого li, называемый product_id, для легкого отслеживания, когда мы нажимаем на элементы списка. Если вы не уверены, что такое атрибут данных, осмотрите элемент li, который мы создали ниже, и вы увидите, что на нем есть product-id = "1" et c.
Во время l oop, мы также добавляем прослушиватель событий к каждому элементу li, и при нажатии мы предупреждаем атрибут данных, который мы установили выше. В этом случае вы можете делать все, что захотите, а с помощью product_id вы можете легко фильтровать / обновлять ваши данные.
const listEl = document.getElementById('js-list');
let yourData = {
products: [{
product_id: 1,
price: '$20',
},
{
product_id: 2,
price: '$25',
},
{
product_id: 3,
price: '$30',
},
]};
// There are a few ways to loop the products object, I am just going to a simple for loop
for (let i = 0; i < yourData.products.length; i++) {
// Create the element
let el = document.createElement("li");
// we can use datasets to track clicks
el.setAttribute('product-id', yourData.products[i].product_id);
// Add event listeners
el.addEventListener('click', () => {
// getting the dataset value.
let itemClicked = el.getAttribute('product-id');
alert('You clicked on product ' + itemClicked);
});
// Set the content
el.textContent = yourData.products[i].price;
// Add the list item to the dom
listEl.appendChild(el);
}
<ul id="js-list"></ul>
Надеюсь, это поможет вам.