时间戳

首页 > 解决方案 > 如何遍历 javascript 中的内容数据并在引导网格列中显示？

javascript - 如何遍历 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 没有按照我想要的方式呈现。

标签： javascripthtmlcontentful

解决方案

嘿嘿。我没有测试我可以看到两个潜在的问题。renderProducts不返回任何东西。您可以尝试更改它以返回您的 mapped 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
}

推荐阅读