每个数据只显示一个数据，当访问每个数据时，结果是未定义的。

Question

我有一个产品div，它包含data-product属性，它的值是object。我想把产品数据放到gtag中。

但是为什么我每次做的时候，只有一个数据？当我想访问data.id和data.name时，为什么它是未定义的？

​

$(document).ready(function(){
  const promotions = []
  
    $(".product-item").each(function(){
    const data = $(this).data('product');
    
    promotions.push({
      "id": data.id,
      "name": data.name
    })
  })
  
  //gtag('event', 'view_promotion', {
    //promotions
  //});
  
  $('.product-item').each(function(){
    $(this).on("click", function(e){
      const data = $(this).data('product')
      console.log(data)
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-item" data-product='{"id" : 123, "name" : "Product 1"}'>
  Product 1
</div>
<div class="product-item" data-product='{"id" : 124, "name" : "Product 2"}'>
  Product 2
</div>
<div class="product-item" data-product='{"id" : 125, "name" : "Product 3"}'>
  Product 3
</div>

​

Answer 1

根据API接口，属性值必须是一个有效的JSON，包括引用的属性名称。

在您的示例中，它没有正确地格式化为JSON，因此它无法工作。将data-product格式为有效的JSON。

一旦修复了JSON，就可以循环升级

$(document).ready(function(){
  let promotions = []
  $(".product-item").each(function(){
    const data = $(this).data('product');
        
    promotions.push({
      "id": data.id,
      "name": data.name
    })
  })
      
           
  gtag('event', 'view_promotion', {
    promotions
  });
})

Answer 2

更改HTML代码，适用于我：

<div class="product-item" data-product='{"id":124,"name":"Product 1"}'>
    Product 1
</div>
<div class="product-item" data-product='{"id":125,"name":"Product 2"}'>
    Product 2
</div>
<div class="product-item" data-product='{"id":126,"name":"Product 3"}'>
    Product 3
</div>