从 Contentful 获取 JSON 到 Mustache

Question

我正在尝试从 Contentful (JSON) 获取我的条目并将它们放入 Mustache 模板中。

以下代码有效，但未应用于模板：

client.getEntries()
.then((response) => {
    $('.result').html(response.items.map((item) => ' Items: ' + item.sys.id).join('\n'));

})
.catch((error) => {
    console.log('\x1b[31merror occured')
    console.log(error)
})

当我尝试相同的过程但将其放入模板时它不起作用:

client.getEntries()
  .then((response) => {

    var template = $('#myEntries').html();
    var html = Mustache.to_html(template, response.data);
    $('.result').html(html);

  })
  .catch((error) => {
    console.log('Error occured')
    console.log(error)
  })

HTML

<script id="myEntries" type="text/template">
    {{#items}} {{fields.customerName}} {{/items}}
</script>

<div class="result"></div>

似乎 JSON 字符串没有正确附加到模板？

JSON 文件如下所示

  {
     "sys":{
        "type":"Array"
     },
     "total":3,
     "skip":0,
     "limit":100,
     "items":[
        {
           "sys":{
              "space":{
                 "sys":{
                    "type":"Link",
                    "linkType":"Space",
                    "id":"4eewqivb4aog"
                 }
              },
              "id":"4moramDebKGsUwI2a6YOSe",
              "type":"Entry",
              "createdAt":"2017-03-31T17:31:25.994Z",
              "updatedAt":"2017-03-31T17:31:25.994Z",
              "revision":1,
              "contentType":{
                 "sys":{
                    "type":"Link",
                    "linkType":"ContentType",
                    "id":"customer"
                 }
              },
              "locale":"sv-SE"
           },
           "fields":{
              "customerName":"3",
              "customerUrl":"3"
           }
        },
        {
           "sys":{
              "space":{
                 "sys":{
                    "type":"Link",
                    "linkType":"Space",
                    "id":"4eewqivb4aog"
                 }
              },
              "id":"5M6NPWMve0YgMcSUcoAusk",
              "type":"Entry",
              "createdAt":"2017-03-31T17:31:51.535Z",
              "updatedAt":"2017-03-31T17:31:51.535Z",
              "revision":1,
              "contentType":{
                 "sys":{
                    "type":"Link",
                    "linkType":"ContentType",
                    "id":"customer"
                 }
              },
              "locale":"sv-SE"
           },
           "fields":{
              "customerName":"4",
              "customerUrl":"4"
           }
        },
        {
           "sys":{
              "space":{
                 "sys":{
                    "type":"Link",
                    "linkType":"Space",
                    "id":"4eewqivb4aog"
                 }
              },
              "id":"2ClsG24K5S6qiAYGi8gEQI",
              "type":"Entry",
              "createdAt":"2017-03-31T17:22:16.490Z",
              "updatedAt":"2017-03-31T17:22:16.490Z",
              "revision":1,
              "contentType":{
                 "sys":{
                    "type":"Link",
                    "linkType":"ContentType",
                    "id":"customer"
                 }
              },
              "locale":"sv-SE"
           },
           "fields":{
              "customerName":"5",
              "customerUrl":"5"
           }
        }
     ]
  }

如果能得到一些帮助就太好了:)

/奥斯卡

Answer 1

从您显示的代码来看，您似乎向模板传递了错误的数据，响应对象没有任何 data 属性。调用 .toPlainObject() 是一个好习惯，这样所有附加的辅助方法都将被删除，您最终只会得到原始数据

您的代码应该是

client.getEntries()
  .then((response) => {

    var template = $('#myEntries').html();
    var html = Mustache.to_html(template, response.toPlainObject());
    $('.result').html(html);

  })
  .catch((error) => {
    console.log('Error occured')
    console.log(error)
  })

从 Contentful 获取 JSON 到 Mustache

Getting JSON from Contentful into Mustache

javascript

api

jquery

json

contentful