从 Contentful 获取 JSON 到 Mustache答案

【问题标题】：Getting JSON from Contentful into Mustache从 Contentful 获取 JSON 到 Mustache
【发布时间】：2017-08-26 14:40:47
【问题描述】：

我正在尝试从 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"
           }
        }
     ]
  }

能在这方面得到一些帮助会很棒:)

/奥斯卡

【问题讨论】：

标签： javascript jquery json api contentful

【解决方案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)
  })

【讨论】：