时间戳

首页 > 解决方案 > How to display the quantity based on the size

javascript - How to display the quantity based on the size

问题描述

    data=[{
      color: 'red',
      qty: '0',
      _1x: '0',
      _2x: '0',
      _3x: '0',
      _4x: '0',
      xxs: '0',
      xs: '0',
      s: '14',
      m: '0',
      l: '0',
      xl: '0'
    },
    {
      color: 'pink',
      qty: '13',
      _1x: '0',
      _2x: '0',
      _3x: '0',
      _4x: '0',
      xxs: '0',
      xs: '0',
      s: '14',
      m: '0',
      l: '0',
      xl: '0'
    },
    {
      color: 'yellow',
      qty: '16',
      _1x: '0',
      _2x: '0',
      _3x: '0',
      _4x: '0',
      xxs: '0',
      xs: '0',
      s: '0',
      m: '0',
      l: '0',
      xl: '12'
    },
    {
      color: 'pink',
      qty: '19',
      _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;
}

enter image description here

How to display the total quantity based on the size?

cause I want to do here is to sum the quantity based on same size and then display it based on the size.

for example color red then it size _2x there's two data and it has a quantity 45 & 45 then it will sum on it 90 then it will display on the size _2x with value 90

here's the code: https://stackblitz.com/edit/react-hook-bxfayy?file=index.js

expected

enter image description here

标签： javascript

解决方案

首先过滤每种颜色items = data.filter(t => t.color == result1[i].color);，然后您需要按每种尺寸过滤它（_2x ,..）。之后，您必须选择qtyvalue bymap并最终计算返回 value 的总和 by reduce。

试试这个：

const SIZES=["_2x","_3x","_4x","l","m","s","xl","xs","xxs"],data=[{color:"red",qty:"45",_1x:"0",_2x:"12",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",qty:"45",_1x:"0",_2x:"9",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",qty:"45",_1x:"0",_2x:"0",_3x:"12",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",qty:"45",_1x:"0",_2x:"0",_3x:"12",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",qty:"65",_1x:"0",_2x:"0",_3x:"0",_4x:"12",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"red",qty:"65",_1x:"0",_2x:"0",_3x:"0",_4x:"12",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"0"},{color:"pink",qty:"65",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"14",xl:"0"},{color:"red",qty:"68",qty:"0",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"14",xl:"0"},{color:"red",qty:"0",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"14",l:"0",xl:"0"},{color:"red",qty:"0",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"12",l:"0",xl:"0"},{color:"red",qty:"0",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"14",m:"0",l:"0",xl:"0"},{color:"pink",qty:"13",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"14",m:"0",l:"0",xl:"0"},{color:"yellow",qty:"16",_1x:"0",_2x:"0",_3x:"0",_4x:"0",xxs:"0",xs:"0",s:"0",m:"0",l:"0",xl:"12"},{color:"pink",qty:"19",_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 items = data.filter(t => t.color == result1[i].color);
            for (var j = 0; j < SIZES.length; j++) {
                result1[i][SIZES[j]] = items.filter(t => t[SIZES[j]] > 0).map(t => t.qty).reduce((a, b) => +a + +b, 0);
            }
        }


        console.log(result1)

推荐阅读