基于两个对象数组创建 html table：一个包含数据，另一个包含列（包括数据数组属性名称）

Question

我正在渲染一个基于对象数组的 table，用于搜索，

 /*
    ============================================================================================================
    ============================================================================================================
  
    Purpose: create html table based on two JSON arrays: array with data, and array with columns to be rendered
  
    ============================================================================================================
    ============================================================================================================
    */

    /* Store the array with the data to be filtered in a constant */
    const dataArray =
      [
        {
          "Category": "Storage & Organization",
          "ID": 1,
          "Product": "Eldon Base for stackable storage shelf, platinum",

        },
        {
          "Category": "Appliances",
          "ID": 2,
          "Product": "1.7 Cubic Foot Compact \"Cube\" Office Refrigerators"
        },
        {
          "Category": "Binders and Binder Accessories",
          "ID": 3,
          "Product": "Cardinal Slant-D-Ring Binder, Heavy Gauge Vinyl"
        }
      ]

    /* Store the "columns" array in a constant
    This constant includes the data attrubute names for the columns that will be displayed */
    const columnsArray =
      [
        {
          "attributeName": "Category"
        },
        {
          "attributeName": "Product"
        },
        {
          "attributeName": "ID"
        }
      ];

    // Function to display array objects as html table
    const displayAsTableRows = (dataArray) => {
      /* Create an table row for each array object */
      const htmlString = dataArray.map((object) => {
        return `
            <tr>
                <td>${object.ID}</td>
                <td>${object.Category}</td>
                <td>${object.Product}</td>
            </tr>
        ` ;
      }).join('');
      // Render table in "dataTable" html table element
      document.getElementById('dataTable').innerHTML = htmlString;
    };

    // Display objects array as html table when loading the page for the first time
    displayAsTableRows(dataArray);

  <table id="dataTable"></table>

我可以通过以下方式获取列数组属性名称： columnsArray.map（列=>column.attributeName）获取具有属性名称的数组： [“类别”、“产品”、“ID”]

但是，我不确定如何“合并”“dataArray”映射中的 columnsArray，因此 html table 根据列数和内容动态呈现“columnsArray”元素内容。

基本上，我希望避免硬编码：

                <td>${object.ID}</td>
                <td>${object.Category}</td>
                <td>${object.Product}</td>

并且有这样的东西：（它显然不起作用......）

// Function to display array objects as html table
    const displayAsTableRows = (dataArray) => {
      /* Create an table row for each array object */
      const htmlString = dataArray.map((object) => {
        return `
            <tr>
                <td>${object.<<get the content for each "columnsArray" element "attributeName" content >>}</td>
            </tr>
        ` ;
      }).join('') ;
      // Render table in "dataTable" html table element
      document.getElementById('dataTable').innerHTML = htmlString ;
    };

非常感谢任何帮助！！ :)

Answer 1

这是经过测试的版本

仅硬编码列键

const dataArray = [{
    "Category": "Storage & Organization",
    "ID": 1,
    "Product": "Eldon Base for stackable storage shelf, platinum",

  },
  {
    "Category": "Appliances",
    "ID": 2,
    "Product": "1.7 Cubic Foot Compact \"Cube\" Office Refrigerators"
  },
  {
    "Category": "Binders and Binder Accessories",
    "ID": 3,
    "Product": "Cardinal Slant-D-Ring Binder, Heavy Gauge Vinyl"
  }
]

const columnsArray = [{
  "attributeName": "Category",
  "isSearchable": true,
  "headerName": "Type"
}, {
  "attributeName": "Product",
  "isSearchable": true,
  "headerName": "Product name"
}]

const columnNames = columnsArray.map(column => column.attributeName)

const thead = `<tr>${columnsArray.map(({headerName}) => `<th>${headerName}</th>`).join("")}</tr>`;

const tbody = dataArray.map(object => `<tr>
  ${columnNames.map(columnName => `<td>${object[columnName]}</td>`).join("")}
</tr>`).join("");

document.getElementById("th").innerHTML = thead;
document.getElementById("tb").innerHTML = tbody;

<table>
  <thead id="th"></thead>
  <tbody id="tb"></tbody>
</table>

基于两个对象数组创建 html table：一个包含数据，另一个包含列（包括数据数组属性名称）

Create html table based on two object arrays: one containing the data, and the other including the columns (including the data array attribute names)

javascript

arrays

datatable

arrow-functions