时间戳

首页 > 解决方案 > 使用 JSON 数组中的某些项目填充 HTML 表

javascript - 使用 JSON 数组中的某些项目填充 HTML 表

问题描述

我有一个 JSON 数组，如下所示：

[
{
    "_id": "5c3296f4c7728833bf7cf334",
    "title": "Update styling",
    "content": "Don't forget to update the styling on the website",
    "category": "Cat2",
    "createdAt": "2019-01-07T00:01:56.375Z",
    "updatedAt": "2019-01-07T00:01:56.375Z",
    "__v": 0
}
]

我想用标题、内容和类别字段填充一个 html 表。目前，我正在使用以下代码来填充表格，但它将每个字段都放入表中，而不是我想要的。

const data = [{ "_id": "5c3296f4c7728833bf7cf334", "title": "Update styling", "content": "Don't forget to update the styling on the website", "category": "Cat2", "createdAt": "2019-01-07T00:01:56.375Z", "updatedAt": "2019-01-07T00:01:56.375Z", "__v": 0 }]
const axios = { get: (s) => Promise.resolve({ data }) };

window.addEventListener('load', function() {
  axios.get('http://localhost:2672/categories').then(function (myCategories) {
      // EXTRACT VALUE FOR HTML HEADER. 
      var col = [];
      for (var i = 0; i < myCategories.data.length; i++) {
          for (var key in myCategories.data[i]) {
              if (col.indexOf(key) === -1) {
                  col.push(key);
              }
          }
      }

      // CREATE DYNAMIC TABLE.
      var table = document.createElement("table");

      // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

      var tr = table.insertRow(-1); // TABLE ROW.

      for (var i = 0; i < col.length; i++) {
          var th = document.createElement("th"); // TABLE HEADER.
          th.innerHTML = col[i];
          tr.appendChild(th);
      }

      // ADD JSON DATA TO THE TABLE AS ROWS.
      for (var i = 0; i < myCategories.data.length; i++) {

          tr = table.insertRow(-1);

          for (var j = 0; j < col.length; j++) {
              var tabCell = tr.insertCell(-1);
              tabCell.innerHTML = myCategories.data[i][col[j]];
          }
      }

      // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
      var divContainer = document.getElementById("showCategories");
      divContainer.innerHTML = "";
      divContainer.appendChild(table);
  });
});
<div id="showCategories"></div>

任何想法我将如何做到这一点？

标签： javascripthtmljsontwitter-bootstrapaxios

解决方案

您需要过滤您的数组以仅包含您希望插入到表中的列。之后您可以使用以下内容进行过滤：

col = col.filter((data) => {
    return data === 'title' || data === 'content' || data == 'category';
});

或者您可以使用简单的 if 语句在 for 循环中进行过滤，如下所示：

var col = [];
for (var i = 0; i < myCategories.data.length; i++) {
    for (var key in myCategories.data[i]) {
        if (col.indexOf(key) === -1 && (key === 'title' || key === 'content' || key == 'category')) {
            col.push(key);
        }
    }
}

推荐阅读