时间戳

首页 > 解决方案 > 如何根据颜色获取总数量大小并添加列总计

javascript - 如何根据颜色获取总数量大小并添加列总计

问题描述

const data = [
  {
    color: 'red',
    _1x: "0",
    _2x: "12",
    _3x: "0",
    _4x: "0",
    xxs: "0",
    xs: "0",
    s: "0",
    m: "0",
    l: "0",
    xl: "0"
  },
  {
    color: 'red',
    _1x: "0",
    _2x: "9",
    _3x: "0",
    _4x: "0",
    xxs: "0",
    xs: "0",
    s: "0",
    m: "0",
    l: "0",
    xl: "0"
  },
  {
    color: 'pink',
    _1x: "0",
    _2x: "0",
    _3x: "0",
    _4x: "0",
    xxs: "0",
    xs: "0",
    s: "0",
    m: "0",
    l: "0",
    xl: "12"
  }
];

const result1 = Object.values(
  data.reduce((acc, { color, size, ...rest }) => {
    if (!acc.hasOwnProperty(color)) {
      acc[color] = {
        color,
        ...rest
      };
      return acc;
    }

    Object.keys(rest).forEach(key => {
      acc[color][key] = (+acc[color][key] || 0) + +rest[key];
    });

    return acc;
  }, {})
);

console.log(result1)

我在这里要做的是求和并创建一个新列，它将显示所有颜色的总数。

这是预期的输出和示例代码：https ://stackblitz.com/edit/react-hook-cnxprw?file=index.js

在此处输入图像描述

我使用reduce函数根据颜色对相同的大小求和。

标签： javascripttypescript

解决方案

只需您可以通过嵌套的 for 循环来做到这一点：

const SIZES=["_2x","_3x","_4x","l","m","s","xl","xs","xxs"],data=[{color:"red",_1x:"0",_2x:"12",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"9",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"12",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"12",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"0",_4x:"12",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"0",_4x:"12",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"pink",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"14",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"14",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"14",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"12",l:"0",xl:"0"},{color:"red",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"14",m:"0",l:"0",xl:"0"},{color:"pink",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"14",m:"0",l:"0",xl:"0"},{color:"yellow",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"12"},{color:"pink",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"12"}];

        const result1 = Object.values(
            data.reduce((acc, { color, size, ...rest }) => {
                if (!acc.hasOwnProperty(color)) {
                    acc[color] = {
                        color,
                        ...rest
                    };
                    return acc;
                }

                Object.keys(rest).forEach(key => {
                    acc[color][key] = (+acc[color][key] || 0) + +rest[key];
                });

                return acc;
            }, {})
        );

        for (var i = 0; i < result1.length; i++) {
            var sum = 0;
            for (var j = 0; j < SIZES.length; j++) {
                sum += +result1[i][SIZES[j]]
            }
            result1[i]["Total"] = sum;
        }

        console.log(result1);

这是预期的表格输出

推荐阅读