title: Passing JSON from HTML to jQuery
body: <p>I've got this element which activates a modal and is supposed to pass information to a javascript function to do some actions on the newly opened modal.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;i
  style="cursor:pointer;"
  uk-toggle="target: #edit_product"
  data-uid="{{ @product[uid] }}"
  data-data="{{ json_encode(@product) }}"
  class="material-icons edit_product"&gt;edit&lt;/i&gt;
  </code></pre>
  
  <p>Notice <code>data-data</code> contains a json encoded array, that array looks like this:</p>
  
  <pre><code>Array (
      [uid] =&gt; 1
      [name] =&gt; dasd
      [supplies] =&gt; Array
          (
              [0] =&gt; Array
                  (
                      [supplyid] =&gt; 4
                      [amount_per] =&gt; 5
                      [cost] =&gt; 0.0013024691358025
                  )
  
              [1] =&gt; Array
                  (
                      [supplyid] =&gt; 1
                      [amount_per] =&gt; 10
                      [cost] =&gt; 0.05798
                  )
  
          )
  
      [total_cost] =&gt; 0.059282469135802
      [total_consumables] =&gt; 15
  )
  </code></pre>
  
  <p>This element has the class edit_product, which I have a click handler on:</p>
  
  <pre><code>$(".edit_product").click("click", function() {
      var data = JSON.parse($(this).data('data'));
      console.log(data);
  });
  </code></pre>
  
  <p>But the quotes in the json encoded string are not allowing the javascript to grab this information, I always get the error:</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token o in JSON at position 1</p>
  </blockquote>
  
  <p>How can I pass this data to my javascript?</p>
  
  <p>What I've tried:</p>
  
  <p>I tried changing <code>data-data="{{ json_encode(@product) }}"</code> to <code>data-data='{{ json_encode(@product) }}'</code> so that the quotes should not need to be escaped, but my HTML is still rendering with the double quotes for some reason, and I get the same error.</p>
  
  <p>I've tried wrapping <code>json_encode()</code> with <code>addslashes()</code> but I got an error similar to the above one except the token is a slash.</p>
  
  <p>I tried changing my javascript to pull the data from php by using PHP opening and closing tags inside the javascript, but I couldn't figure out how to select the actual array row that I need, where the <code>data-data</code> method would send only the subarray that I need instead of the full array.</p>