Javascript 将JSON从Contentful转换为Mustach

我正试图从Contentful（JSON）中获取我的条目，并将它们放入一个小胡子模板中

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

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

如果能在这方面得到一些帮助，那就太棒了：）

---

/Oskar

从您显示的代码来看，似乎您向模板传递了错误的数据，响应对象没有任何

数据

属性。调用

.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)
  })

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

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