title: Pass dynamic object in onclick - JavaScript/jQuery
body: <p>I want to pass a dynamic object in <code>onclick</code> jQuery. Please check the below snippet in which I am getting object <code>product</code> value as <code>undefined</code>. Can someone help me on how to pass and receive object value in JavaScript/jQuery?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var hpc = "";
  
  function handleProductsClick(e, product) {
    debugger;
    alert(product &amp;&amp; JSON.stringify(product));
  }
  
  function buildProducts(products) {
    var bp = '';
    hpc = handleProductsClick.bind(products[i]);
    for (var i = 0; i &lt; products.length; i++) {
      bp += '&lt;li onclick="hpc(event)"&gt;' + products[i].value + '&lt;/li&gt;';
    }
    $("#products").html(bp);
  }
  
  function getProductsFromApi() {
    var products = [{
        key: 1,
        value: "Apple"
      },
      {
        key: 2,
        value: "Android"
      }
    ];
    buildProducts(products);
  }
  
  getProductsFromApi();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul id="products"&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>