es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cada dato solo aparece una vez, y al acceder a cada dato el resultado es indefinido.

14 Jul, 2023 Programación

Tengo un div de producto que contiene el atributo data-product, cuyo valor es objeto. Y quiero poner los datos del producto en gtag.

Pero ¿por qué cuando lo hago por cada uno, solo hay 1 dato? ¿y cuándo quiero acceder a data.id y data.name, por qué es undefined?

$(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>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código es que los datos del producto se guardan como una cadena de texto en el atributo data-product en lugar de un objeto JavaScript real, lo cual está causando el error al intentar acceder a los atributos id y name. Para solucionar esto, necesitamos analizar la cadena de texto JSON en un objeto JavaScript utilizando JSON.parse() antes de acceder a los valores. Aquí está el código actualizado:

    $(document).ready(function(){
  const promotions = []

  $(".product-item").each(function(){
    const data = JSON.parse($(this).data('product'));

    promotions.push({
      "id": data.id,
      "name": data.name
    })
  })

  gtag('event', 'view_promotion', {
    "promotions": promotions
  });

  $(".product-item").each(function(){
    $(this).on("click", function(e){
      const data = JSON.parse($(this).data('product'));
      console.log(data)
    })
  })
})

    Al utilizar JSON.parse() en el valor del atributo data-product, podemos acceder al objeto real y empujarlo dentro del array promotions. De manera similar, en el evento click, podemos analizar la cadena de texto JSON en un objeto para acceder a los valores id y name.

Comments are closed.