title: how to pass JSON object from html to javascript file
body: <p>Below is my code:</p>
  
  <pre><code>  &lt;script id="product-listing" type="x-handlebars-template"&gt;
       {{#each productsInCart}}
                &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class="imageDiv"&gt;
                          &lt;img id="productImg" src="src/{{p_id}}.jpg" class="img-responsive" alt="Product Image" &gt;                                
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span&gt;{{p_name}}&lt;/span&gt;&lt;br&gt;
                      &lt;span&gt;Style #: {{p_style}}&lt;/span&gt;&lt;br&gt;
                      &lt;span&gt;COLOR: &lt;/span&gt;
                      &lt;div style="margin-top:15%;"&gt;
                          &lt;span id="spnEdit" onclick="openEditModel('{{p_available_options.colors}}','{{p_id}}');"&gt;EDIT&lt;/span&gt; 
                              &lt;!--&lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;EDIT&lt;/a&gt;--&gt;
                          &lt;span&gt;REMOVE&lt;/span&gt;
  
                          &lt;span&gt;SAVE FOR LATER&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;{{p_selected_size.code}}&lt;/td&gt;
                  &lt;td&gt;{{p_quantity}}&lt;/td&gt;
                  &lt;td&gt;{{c_currency}} {{p_price}}&lt;/td&gt;
                &lt;/tr&gt;
                {{/each}}
                &lt;/script&gt;
  </code></pre>
  
  <p><br>
  I am facing issue while passing a JSON object in a function <code>openEditModel('{{p_available_options.colors}}','{{p_id}}')</code>. The <code>{{p_available_options.colors}}</code> returning <code>[object object]</code>.
  Note: <code>{{p_available_options.colors.[0].hexcode}}</code> getting the value but I need whole set of data.</p>
  
  <p>The snippet of my JSON is attached here <a href="http://i.stack.imgur.com/WNHMv.png" rel="nofollow">enter image description here</a> 
  Can anyone help me with this.</p>
  
  <pre><code>   "p_available_options": {
          "colors": [{
              "name": "green",
              "hexcode": "#A3D2A1"
          }, {
              "name": "yellow",
              "hexcode": "#F9F8E6"
          }, {
              "name": "red",
              "hexcode": "#ED99A8"
          }],
          "sizes": [{
              "name": "small",
              "code": "s"
          }, {
              "name": "medium",
              "code": "m"
          }, {
              "name": "large",
              "code": "l"
          }, {
              "name": "extra large",
              "code": "xl"
          }]
      }
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>Regards,
  Dhiraj</p>