如何在JavaScript中透视对象数组并展示到HTML表格及数值计算

你现有代码的核心问题是原始数据中不存在title字段，导致透视数组生成逻辑失效。按照你描述的「子分类为行、等级为列、销售额聚合求和、支持横向纵向总计」的需求，可参考以下实现：

实现代码 #

const data=[{
  "Id": 1,
  "Grade": "Grade A",
  "category": "Grains",
  "subCategory": "Maize",
  "sales": 1200
},
{
  "Id": 2,
  "Grade": "Grade B",
  "category": "Grains",
  "subCategory": "Wheat",
  "sales": 130
},
{
  "Id": 3,
  "Grade": "Grade B",
  "category": "Grains",
  "subCategory": "Banana",
  "sales": 1200
},
{
  "Id": 4,
  "Grade": "Grade C",
  "category": "Grains",
  "subCategory": "Apple",
  "sales": 1400
},
{
  "Id": 5,
  "Grade": "Grade A",
  "category": "Grains",
  "subCategory": "Maize",
  "sales": 1200
},
{
  "Id": 6,
  "Grade": "Grade B",
  "category": "Grains",
  "subCategory": "Wheat",
  "sales": 130
},
{
  "Id": 7,
  "Grade": "Grade B",
  "category": "Grains",
  "subCategory": "Banana",
  "sales": 1200
},
{
  "Id": 8,
  "Grade": "Grade C",
  "category": "Grains",
  "subCategory": "Apple",
  "sales": 1400
},
{
  "Id": 7,
  "Grade": "Grade B",
  "category": "Grains",
  "subCategory": "Banana",
  "sales": 1200
},
{
  "Id": 8,
  "Grade": "Grade C",
  "category": "Grains",
  "subCategory": "Apple",
  "sales": 1400
}]

// 步骤1：提取唯一的列维度（Grade）和行维度（subCategory），如需调整聚合维度可修改此处字段
const grades = [...new Set(data.map(item => item.Grade))]
const subCategories = [...new Set(data.map(item => item.subCategory))]

// 步骤2：计算每个交叉点的销售额总和
const pivotValueMap = data.reduce((acc, cur) => {
  const crossKey = `${cur.subCategory}_${cur.Grade}`
  acc[crossKey] = (acc[crossKey] || 0) + cur.sales
  return acc
}, {})

// 步骤3：生成带行总计的表格行数据
const tableBodyRows = subCategories.map(sub => {
  const rowItem = { subCategory: sub }
  let rowSum = 0
  grades.forEach(grade => {
    const val = pivotValueMap[`${sub}_${grade}`] || 0
    rowItem[grade] = val
    rowSum += val
  })
  rowItem.行总计 = rowSum
  return rowItem
})

// 步骤4：生成带列总计的底部合计行
const totalRow = { subCategory: '列总计' }
let grandTotal = 0
grades.forEach(grade => {
  const colSum = tableBodyRows.reduce((sum, row) => sum + row[grade], 0)
  totalRow[grade] = colSum
  grandTotal += colSum
})
totalRow.行总计 = grandTotal

// 最终透视表数据（可直接用于渲染表格）
const finalPivotTable = [...tableBodyRows, totalRow]
console.log(finalPivotTable)

输出说明 #

最终生成的finalPivotTable数组每一项对应表格的一行，包含子分类、各等级对应的销售额、行总计，最后一项为所有列的合计值，你可以直接用该数组渲染HTML表格或者各类前端组件库的表格组件。

内容的提问来源于stack exchange，提问作者kimbosa