如何将数据属性中的对象添加到 javascript 中的数组？请查看下面的更多规范

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);

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>