Question

我向/cart.js发出GET请求。它返回以下JSON数据：

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

我想做的是items上的迭代器，并显示id，title和quantity。

这是我尝试的内容：

<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>

但是这会回来：

Id Title Qty

没有任何数据。我知道GET请求正在运行，因为console.log(jqxhr.responseJSON);打印了正确的数据。

我做错了什么，我接下来可以尝试什么？

修改

我认为我错误地处理了Ajax响应。

JSFiddle：http://jsfiddle.net/narzero/4fn3f6sg

编辑2：

值得一提的是，我在Shopify商店运行代码。

Answer 1

我通过在句柄脚本类中添加标记{% 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 %}时，确保不会在这些标签内解析任何液体。

感谢帮助人员。

Answer 2

你循环使用你提供的数据的方式应该有效，但我发现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>

如何在Shopify商店中使用handlebars.js循环JSON数组？

2 个答案: