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

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

/*
============================================================================================================
============================================================================================================
用途：基于两个JSON数组创建html表：带数据的数组和带要呈现的列的数组
============================================================================================================
============================================================================================================
*/
/*将包含要筛选的数据的数组存储为常量*/
常量数据数组=
[
{
“类别”：“存储和组织”，
“ID”：1，
“产品”：“用于可堆叠存储架的Eldon底座，铂金”，
},
{
“类别”：“电器”，
“ID”：2，
“产品”：“1.7立方英尺紧凑型”立方体“办公冰箱”
},
{
“类别”：“活页夹和活页夹附件”，
“ID”：3，
“产品”：“Cardinal斜D型环粘合剂，厚规格乙烯基”
}
]
/*将“columns”数组存储在常量中
此常量包括将显示的列的数据属性名称*/
常量柱状体=
[
{
“attributeName”：“类别”
},
{
“属性名称”：“产品”
},
{
“attributeName”：“ID”
}
];
//函数将数组对象显示为html表
const displayatablerows=（数据数组）=>{
/*为每个数组对象创建一个表行*/
常量htmlString=dataArray.map（（对象）=>{
返回`
${object.ID}
${object.Category}
${object.Product}
` ;
}).加入（“”）；
//在“dataTable”html表格元素中呈现表格
document.getElementById（'dataTable'）。innerHTML=htmlString；
};
//首次加载页面时将对象数组显示为html表
displayAsTableRows（数据数组）
这是一个经过测试的版本

仅列键硬编码


const数据数组=[{
“类别”：“存储和组织”，
“ID”：1，
“产品”：“用于可堆叠存储架的Eldon底座，铂金”，
},
{
“类别”：“电器”，
“ID”：2，
“产品”：“1.7立方英尺紧凑型”立方体“办公冰箱”
},
{
“类别”：“活页夹和活页夹附件”，
“ID”：3，
“产品”：“Cardinal斜D型环粘合剂，厚规格乙烯基”
}
]
常量列数组=[{
“属性名称”：“类别”，
“可听”：是的，
“headerName”：“类型”
}, {
“属性名称”：“产品”，
“可听”：是的，
“headerName”：“产品名称”
}]
const columnNames=columnsArray.map（column=>column.attributeName）
consthead=`${columnsArray.map（（{headerName}）=>`${headerName}'）。连接（“”）`；
const tbody=dataArray.map（对象=>`
${columnNames.map（columnName=>`${object[columnName]}`）。连接（“”}
`).加入（“”）；
document.getElementById（“th”）.innerHTML=thead；
document.getElementById（“tb”）.innerHTML=tbody

对不起！我是新来的。。。现在这样更好了吗？因此您的
列ray
与您在
displayatablerows
Done中的代码不匹配！现在看起来怎么样？你完全正确@mplungjan！我现在正在做：）太棒了，谢谢！！现在的问题是。。。我只需要显示来自“columnsArray”的数据，因为“dataArray”有我不感兴趣的额外属性，我需要它们从html表中省略。这就是为什么我有一个单独的“columnsArray”，它实际上有额外的属性，例如：const columnsArray=[{“attributeName”：“Category”，“isSearchable”：true，“headerName”：“Type”}，{“attributeName”：“Product”，“isSearchable”：true，“headerName”：“Product name”}]见更新脚本这太棒了！！非常感谢！！你是最棒的：）