HTML data-id value to Javascript Array name

Question

I am trying to map a data-id attribute value to a Javascript Array name.

I would like to have product = productid01 where productid01 is the text value of data-id.

<html>
 <table>
  <tr>
   <td>$200<button type="button" class="function-buy" data-id="productid01" id="btn-productid01">Buy</button></td>
  </tr>
 </table>
</html>

<script>
 $( document ).ready(function() {  

  var productid01 = {desc:"This is a product", price:200.00};        

  $(document).on('click', '.function-buy', function(){
   id = $(this).data("id");      //id = productid01
   var product = id;             //var product = productid01 (would like !)
   document.write(product.desc); //Expected output : This is a product
  });
 });
</script>

I have discovered that eval() seems to work :

var product = eval(id);

but is there a better way to achieve this without using eval() ?

For sure i have a kind of datatype mismatch here, but i cannot figure out how to work around this.

Thanks for your help.

This feels like you're over-thinking things or there's a behaviour you're not fully explaining. What else is it you're trying to retrieve on your click event that you're not already getting without the use of eval? — Phil.Wheeler
– Phil.Wheeler, Commented Jun 5, 2017 at 0:39
So you're trying to map the ID of a product to an actual object based on the value of the data-id attribute? Is your product list being stored as an array in memory somewhere? — Phil.Wheeler
– Phil.Wheeler, Commented Jun 5, 2017 at 0:44

Edy Silva · Accepted Answer · 2017-06-05 00:48:46Z

1

You can make use of javascript objects, see example:

<html>
 <table>
  <tr>
   <td>$200<button type="button" class="function-buy" data-id="productid01" id="btn-productid01">Buy</button></td>
  </tr>
 </table>
</html>

<script>
 $( document ).ready(function() {  

  var products = {
    productid01 : {desc:"This is a product", price:200.00}
  };

 

  $(document).on('click', '.function-buy', function(){
   id = $(this).data("id");      //id = productid01
   var product = products[ id ]; // get the product01
   document.write(product.desc); //Expected output : This is a product
  });
 });
</script>

answered Jun 5, 2017 at 0:48

Edy Silva

5912 gold badges5 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edy Silva Over a year ago

Perfect, it was a pleasure to help.

guest271314 · Accepted Answer · 2017-06-05 00:45:22Z

You can define productidN as properties of an object, use bracket notation.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table>
  <tr>
    <td>$200<button type="button" class="function-buy" data-id="productid01" id="btn-productid01">Buy</button></td>
  </tr>
</table>


<script>
  $(document).ready(function() {
  
    var options = {
      productid01: {
        desc: "This is a product",
        price: 200.00
      }
    };

    $(document).on('click', '.function-buy', function() {
      var id = $(this).data("id"); //id = productid01
      var product = id; //var product = productid01 (would like !)
      product = options[product];
      $("body").append(product.desc); //Expected output : This is a product
    });
  });
</script>

</html>

Collectives™ on Stack Overflow

HTML data-id value to Javascript Array name

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related