如何将JSON对象从html传递到javascript文件

Question

下面是我的代码：

  <script id="product-listing" type="x-handlebars-template">
     {{#each productsInCart}}
              <tr>
                <td>
                    <div class="imageDiv">
                        <img id="productImg" src="src/{{p_id}}.jpg" class="img-responsive" alt="Product Image" >                                
                    </div>
                </td>
                <td>
                    <span>{{p_name}}</span><br>
                    <span>Style #: {{p_style}}</span><br>
                    <span>COLOR: </span>
                    <div style="margin-top:15%;">
                        <span id="spnEdit" onclick="openEditModel('{{p_available_options.colors}}','{{p_id}}');">EDIT</span> 
                            <!--<a href="#" data-toggle="modal" data-target="#myModal">EDIT</a>-->
                        <span>REMOVE</span>

                        <span>SAVE FOR LATER</span>
                    </div>
                </td>
                <td>{{p_selected_size.code}}</td>
                <td>{{p_quantity}}</td>
                <td>{{c_currency}} {{p_price}}</td>
              </tr>
              {{/each}}
              </script>

我在函数openEditModel('{{p_available_options.colors}}','{{p_id}}')传递JSON对象时遇到问题。 {{p_available_options.colors}}返回[object object] 。 注意： {{p_available_options.colors.[0].hexcode}}获取值，但是我需要整套数据。

我的JSON的代码段附在此处，在此处输入图片描述，任何人都可以帮我解决这个问题。

   "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"
        }]
    }

提前致谢！

问候，Dhiraj

Answer 1

看起来您正在使用把手来填充数据。 检查html并查看json是否在标记内-根据您的测试把手，它没有处理对象填充。

在填充对象并将其转换为服务器上的字符串之前，我将阅读有关如何原始呈现JSON对象的车把文档。

Answer 2

<script>
 Handlebars.registerHelper('p_available_options', function() {
   return JSON.stringify(this);
 });
</script>

<span id="spnEdit" onclick="openEditModel('{{p_available_options}}','{{p_id}}');">EDIT</span> 

The above code worked for me.. :) Thanks all :)