如何解决如何遍历javascript中的内容数据并显示在引导网格列中?
我正在使用Contentful CMS,用于发布一些数据并在html页面中进行检索。我使用JavaScript在引导网格列中显示了这些内容,但没有正确显示数据。
这是我的代码:
<div class="row justify-content-center">
<div id="content"></div>
</div>
var client = contentful.createClient({
space: '#######',accessToken: '#######'
})
var container = document.querySelector('#content');
client.getEntries()
.then(function(entries) {
container.innerHTML = renderProducts(entries.items)
})
function renderProducts(products) {
products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
})
}
它在控制台中正确显示了数据,但是HTML并未按照我的方式呈现。
解决方法
Heyo。我没有测试我可以看到两个潜在的问题。 renderProducts
未返回任何内容。您可以尝试更改它以返回映射的products
。然后innerHTML
需要一个字符串值,这意味着您必须将映射数组连接在一起。
function renderProducts(products) {
//?add a return here
return products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
}).join('');
// ? join the array of strings together to one long string
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。