How can i add objects from data attribute to an array in javascript?Check below for more specification

Question

But I have a problem. In HTML data attributes, I put some data from php and then I access those data in javascript as an object. I am writing a shopping cart project using js. However for some reasons, I can't put all the objects in an array. Here's my code.

let carts = document.querySelectorAll('.addtocart');
  for(let i=0;i<carts.length; i++){
    let datattr = {
      product_name:carts[i].dataset.name,
      product_tag:carts[i].dataset.name,
      product_price:carts[i].dataset.price,
      product_img:carts[i].dataset.img,
      incart:0
    };
    let products = [];
    console.log(datattr);

question from:https://stackoverflow.com/questions/65546325/how-can-i-add-objects-from-data-attribute-to-an-array-in-javascriptcheck-below

Answer 1

I'm not sure what your goal is but you can get all of the data attributes in an array by selecting the elements, setting up an array for the data attributes and looping through the elements, placing the values in your array.

let carts = document.querySelectorAll('.addtocart');
const dataattr = [];
carts.forEach(el => {
  dataattr.push({
    product_name: el.dataset.name,
    product_tag: el.dataset.name,
    product_price: el.dataset.price,
    product_img: el.dataset.img,
  })
});
console.log(dataattr);

.addtocart:before {
  content: attr(data-name);
  font-family: sans-serif;
}

<div class="addtocart" data-name="apple" data-price="1.00" data-img="apple.jpg"></div>
<div class="addtocart" data-name="banana" data-price="0.70" data-img="banana.jpg"></div>
<div class="addtocart" data-name="orange" data-price="2.00" data-img="orange.jpg"></div>