從Contentful獲取JSON到Mustache

我試圖從Contentful（JSON）中獲取條目並將其放入Mustache模板中。從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" 
      } 
     } 
    ] 
    }

將是真棒得到一些幫助，這:)

/奧斯卡

來源

2017-04-01 Osgar Schölander

從你表現的代碼，它看起來像你逝去將錯誤的數據發送到模板，響應對象沒有任何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) 
    })

來源

2017-04-01 11:19:04

太好了！這解決了我的解釋！ –

從Contentful獲取JSON到Mustache

回答

相關問題