Javascript 如何在Shopify商店中使用handlebar.js循环JSON数组？
我正在向Javascript 如何在Shopify商店中使用handlebar.js循环JSON数组？,javascript,jquery,handlebars.js,shopify,liquid,Javascript,Jquery,Handlebars.js,Shopify,Liquid,我正在向/cart.js发出GET请求。它返回以下JSON数据： { "token":"118aa66ff7cc99c7fb4524f07bd305a4", "note":null, "attributes":{ }, "total_price":771, "total_weight":0, "item_count":3, "items":[ { "id":903858951, "title":"A
/cart.js{
"token":"118aa66ff7cc99c7fb4524f07bd305a4",
"note":null,
"attributes":{
},
"total_price":771,
"total_weight":0,
"item_count":3,
"items":[
{
"id":903858951,
"title":"Aarts Frambozen op siroop",
"price":211,
"line_price":211,
"quantity":1,
"sku":"wi195688",
"grams":0,
"vendor":"Aarts",
"properties":null,
"product_id":385866167,
"variant_id":903858951,
"gift_card":false,
"url":"/products/aarts-frambozen-op-siroop?variant=903858951",
"image":"https://cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303234343731_dRevLabel_1_Rendition_LowRes_JPG.jpeg?v=1413443204",
"handle":"aarts-frambozen-op-siroop",
"requires_shipping":true
},
{
"id":903852739,
"title":"AH Aardappelschijfjes spek en ui",
"price":211,
"line_price":211,
"quantity":1,
"sku":"wi202676",
"grams":0,
"vendor":"AH",
"properties":null,
"product_id":385862935,
"variant_id":903852739,
"gift_card":false,
"url":"/products/ah-aardappelschijfjes-spek-en-ui?variant=903852739",
"image":"https://cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303038363632_dRevLabel_2_Rendition_LowRes_JPG.jpeg?v=1413442904",
"handle":"ah-aardappelschijfjes-spek-en-ui",
"requires_shipping":true
},
{
"id":903852571,
"title":"AH Aardappelen iets kruimig voordeelzak",
"price":349,
"line_price":349,
"quantity":1,
"sku":"wi127728",
"grams":0,
"vendor":"AH",
"properties":null,
"product_id":385862819,
"variant_id":903852571,
"gift_card":false,
"url":"/products/ah-aardappelen-iets-kruimig-voordeelzak?variant=903852571",
"image":"https://cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303233343335_dRevLabel_1_Rendition_LowRes_JPG.jpeg?v=1413442897",
"handle":"ah-aardappelen-iets-kruimig-voordeelzak",
"requires_shipping":true
}
],
"requires_shipping":true
}
项id标题数量<script class="foobar" charset="utf-8" type="text/x-handlebars-template">
<div>
{{#items}}
<thead>
<th>Id</th>
<th>Title</th>
<th>Qty</th>
</thead>
<tbody>
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{quantity}}</td>
</tr>
</tbody>
{{/items}}
</div>
</script>
<script charset="utf-8">
var source = $(".foobar").html();
var template = Handlebars.compile(source);
var jqxhr = $.getJSON( "/cart.js", function() {
console.log( "success" );
})
$('body').append(template(jqxhr.responseJSON));
</script>
console.log（jqxhr.responseJSON）打印正确的数据
我做错了什么？下一步我能做什么
编辑：
我认为我错误地处理了Ajax响应
JSFiddle：
编辑2:
可能值得一提的是，我正在Shopify商店上运行代码。您在提供的数据上循环的方式应该是可行的，但我看到ajax调用有一个小错误，这实际上会让您认为您的代码不起作用
您必须在代码的完整回调中返回结果，因为您使用的是ajax，而ajax是异步的
$.getJSON( "/cart.js", function(data) {
$('body').append(template(data));
});
我不确定这是否是故意的，但你们的桌子不完整
<script class="foobar" charset="utf-8" type="text/x-handlebars-template">
<div>
<table>
<thead>
<th>Id</th>
<th>Title</th>
<th>Qty</th>
</thead>
<tbody>
{{#items}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{quantity}}</td>
</tr>
{{/items}}
</tbody>
</table>
</div>
</script>
身份证件
标题
数量
{{{#项目}
{{id}
{{title}}
{{数量}}
{{/items}
您在提供的数据上循环的方式应该是可行的，但是我看到ajax调用中有一个小错误，这实际上会让您认为您的代码不起作用
您必须在代码的完整回调中返回结果，因为您使用的是ajax，而ajax是异步的
$.getJSON( "/cart.js", function(data) {
$('body').append(template(data));
});
我不确定这是否是故意的，但你们的桌子不完整
<script class="foobar" charset="utf-8" type="text/x-handlebars-template">
<div>
<table>
<thead>
<th>Id</th>
<th>Title</th>
<th>Qty</th>
</thead>
<tbody>
{{#items}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{quantity}}</td>
</tr>
{{/items}}
</tbody>
</table>
</div>
</script>
身份证件
标题
数量
{{{#项目}
{{id}
{{title}}
{{数量}}
{{/items}
我通过在handlebar脚本类中添加标记{%raw%}
{%endraw%}
解决了这个问题，如下所示：
<script class="foobar" type="text/x-handlebars-template">
{% raw %}
<div>
<thead>
<th>Id</th>
<th>Title</th>
<th>Qty</th>
</thead>
<tbody>
{{#items}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{quantity}}</td>
</tr>
</tbody>
{{/items}}
</div>
{% endraw %}
</script>
{%raw%}
身份证件
标题
数量
{{{#项目}
{{id}
{{title}}
{{数量}}
{{/items}
{%endraw%}
当使用{%raw%}
时，它确保在这些标记中不会解析任何液体
谢谢大家的帮助。我通过在handlebar脚本类中添加标记{%raw%}
{%endraw%}
解决了这个问题，如下所示：
<script class="foobar" type="text/x-handlebars-template">
{% raw %}
<div>
<thead>
<th>Id</th>
<th>Title</th>
<th>Qty</th>
</thead>
<tbody>
{{#items}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{quantity}}</td>
</tr>
</tbody>
{{/items}}
</div>
{% endraw %}
</script>
{%raw%}
身份证件
标题
数量
{{{#项目}
{{id}
{{title}}
{{数量}}
{{/items}
{%endraw%}
当使用{%raw%}
时，它确保在这些标记中不会解析任何液体
谢谢大家的帮助。使用{{{{id}}{{/each}}
这是你想做的吗？@DennisMartinez这正是我想要的。但当我将它用于真正的JSON数据时，它就不起作用了。我认为我错误地处理了json响应。看看这个JSFiddle：@narzero啊！是的，对不起，我甚至没有想到要看ajax的响应。由于您正在执行异步调用，因此必须将代码的body.append部分放在getJSON complete方法中。试试看，让我知道你得到了什么。使用{{{{each items}{{id}}{{/each}}
这是你想做的吗？@DennisMartinez这正是我想要的。但当我将它用于真正的JSON数据时，它就不起作用了。我认为我错误地处理了json响应。看看这个JSFiddle：@narzero啊！是的，对不起，我甚至没有想到要看ajax的响应。由于您正在执行异步调用，因此必须将代码的body.append部分放在getJSON complete方法中。试试看，让我知道你得到了什么。@narzero从我看到的情况来看，ajax调用被注释掉了。它被移动到外部脚本了吗？没有，我把它注释掉是为了测试其他东西，对此很抱歉。你可以去看看。主题的所有Ajax调用都在这里：。你可能会在里面找到一些东西<例如，第191行的code>Shopify.getCartShopify.getCart（函数（cart）{$（'body'）.append（模板（cart））；}）我没有使用它们，谢谢你提供的信息。如果您访问主页，并将该代码复制粘贴到控制台中，它是否适用于您？结果应该在底部。这对我不起作用。我得到了表头，但没有数据。@从我看到的情况来看，ajax调用被注释掉了。它被移动到外部脚本了吗？没有，我把它注释掉是为了测试其他东西，对此很抱歉。你可以去看看。主题的所有Ajax调用都在这里：。你可能会在里面找到一些东西<例如，第191行的code>Shopify.getCartShopify.getCart（函数（cart）{$（'body'）.append（模板（cart））；}）我没有使用它们，谢谢你提供的信息。如果您访问主页，并将该代码复制粘贴到控制台中，它是否适用于您？结果应该在底部。这对我不起作用。我得到了表头，但没有数据。