在javascript中透视数组

我正在尝试对上面的数组进行透视，以便以类似于下表的方式输出它。我的第一个倾向是创建一个.foreach循环的嵌套，并将它们分离成单独的数组，然后对它们进行解析。你会这样做吗

我想学习一种将数组转换为可以生成所需表样式的数组的最佳方法。 谢谢

.tg{边框折叠：折叠；边框间距：0；边框颜色：#aabcfe；}
.tg td{字体系列：Arial，无衬线；字体大小：14px；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；边框颜色：#aabcfe；颜色：#669；背景颜色：#e8edff}
.tg th{font-family:Arial，无衬线；字体大小：14px；字体重量：正常；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；边框颜色：#aabcfe；颜色：#039；背景颜色：#b9c9fe；}
.tg.tg-yw4l{垂直对齐：顶部}
.tg.tg amwm{font-weight:bold；text-align:center；vertical-align:top}
.tg.tg-9hbo{字体大小：粗体；垂直对齐：顶部}
A.
B
第一类
第二类
第一类
第二类
100
MX01
MX01Q
MX10
MX10Q
MX02Q
200
MX03
MX03Q
MX30
MX30Q
MX04Q

const供应=[
{系列：“A”，类别：“Cat1”，产品：“MX01”，价值：100}，
{系列：“A”，类别：“Cat2”，产品：“MX01Q”，价值：100}，
{系列：“B”，类别：“Cat1”，产品：“MX10”，价值：100}，
{系列：“B”，类别：“Cat2”，产品：“MX10Q”，价值：100}，
{系列：“A”，类别：“Cat2”，产品：“MX02Q”，价值：100}，
{系列：“A”，类别：“Cat1”，产品：“MX03”，价值：200}，
{系列：“A”，类别：“Cat2”，产品：“MX03Q”，价值：200}，
{系列：“B”，类别：“Cat1”，产品：“MX30”，价值：200}，
{系列：“B”，类别：“Cat2”，产品：“MX30Q”，价值：200}，
{系列：“A”，类别：“Cat2”，产品：“MX04Q”，价值：200}]；
//获取唯一族的列表
var系列=supply.map（功能（项目）
{
返回项.族；
}).过滤器（函数（值、索引、自）
{
返回self.indexOf（value）==index；//删除重复项
});
//获取唯一类别的列表
变量类别=supply.map（功能（项目）
{
退货项目.类别；
}).过滤器（函数（值、索引、自）
{
返回self.indexOf（value）==index；//删除重复项
});
//获取唯一值的列表
var值=supply.map（功能（项目）
{
返回项.VALUE；
}).过滤器（函数（值、索引、自）
{
返回self.indexOf（value）==index；//删除重复项
});
功能getProduct（系列、类别、价值）
{
返回供应过滤器（功能（项目）
{
返回item.FAMILY==FAMILY&&item.CATEGORY==CATEGORY&&item.VALUE==VALUE；
}).map（功能（项目）
{
退货项目.产品；
});
}
//使用族生成标题行
var rowFamily=''+family.map（函数（项）
{
返回“”+项目+“”；
}).加入（“”+“”）；
//使用类别构建副标题行
var rowCategory=''+family.map（函数（itemF）
{
返回类别.map（函数（itemC）
{
返回“”+项目C+“”；
}).加入（“”）；
}).加入（“”+“”）；
//为每个值显示一行
var rowValues=value.map（函数（itemV）
{
返回“”+itemV+“”+family.map（函数（itemF）
{
返回类别.map（函数（itemC）
{
返回“”+getProduct（itemF、itemC、itemV）；
}).加入（“”）；
}).加入（“”+“”）；
}).加入（“”）；
//把它们都放在桌子上
document.getElementById（'tbl'）.innerHTML=rowFamily+rowCategory+rowValues
您的问题不清楚。为什么
供应
数组不足以创建下表？你想如何改变它？到目前为止你已经尝试了什么？这是非常好的Ivo。我从未想过使用过滤器和映射。附加的文档注释有助于我理解如何构建更复杂的表格。谢谢。如果这回答了您的问题，欢迎您将其标记为“接受答案”。
const supply =[
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX01",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX01Q",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX10",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX10Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX02Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX03",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX03Q",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX30",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX30Q",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX04Q",VALUE:200}]