lodash数组阵列

问题描述 投票:0回答:2

嗨我有这样的数据

newProcessData: [
  {
    "processType": "ABC Type1", 
    "processSource": "ABC Source1",
    "groupName": "G1",
    "breakdowns": [
      {
        "size": 'S",
        "quantity": 20,
      },
    ],

  },{
    "processType": "ABC Type2", 
    "processSource": "ABC Source2",
    "groupName": "G2",
    "history": [
      {
        "size": 'S",
        "quantity": 20,
      },{
      "size": 'XL",
      "quantity": 20,
      }
    ],
    "breakdowns": [
      {
        "size": 'S",
        "quantity": 20,
      },{
      "size": 'XL",
      "quantity": 20,
      }
    ],

  },
];

首先,我使用GroupData按groupName对数据进行排序

    let groupByData = _.groupBy(newProcessData, 'groupName')

然后我使用Lodash地图填充所有数组数据,

我的目标是通过使用_.sumBy显示细分数量,历史记录并显示进程类型

       {_.map(groupByData, (v, idx) => {
      <Table>
       <TableBody displayRowCheckbox={false}>
         <TableRow>
           <TableRowColumn style={{textAlign: 'right'}}>{ " sum of all the quantity of breakdowns"}</TableRowColumn>
 <TableRowColumn style={{textAlign: 'right'}}>{ " sum of all the quantity of history"}</TableRowColumn>
 <TableRowColumn style={{textAlign: 'right'}}>{ "Get the processType name"}</TableRowColumn>
         </TableRow>
       </TableBody>
     </Table>
     })}

任何帮助将非常感激

reactjs ecmascript-6 lodash
2个回答
0
投票

你的groupByData是一个对象。您需要返回数组,以便您可以使用map迭代它。使用values,你将得到groupByData的所有值,然后在每个数组上迭代map,你可以使用forEach迭代每个数组,并使用sumBy求和每个对象的所有breakdowns

var newProcessData = [ { "processType": "ABC Type1", "processSource": "ABC Source1", "groupName": "G1", "breakdowns": [ { "size": "S", "quantity": 20, }, ], },{ "processType": "ABC Type2", "processSource": "ABC Source2", "groupName": "G2", "breakdowns": [{ "size": "S", "quantity": 20 } ] }],
  groupByData = _.groupBy(newProcessData, 'groupName'),
  summed = _.map(_.values(groupByData), a => { 
    _.forEach(a, o => {
      sum = _.sumBy(o.breakdowns, 'quantity');
      console.log(sum);
    });
  });
console.log(groupByData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

0
投票

你可以使用更实用的风格来获得你想要的东西。希望代码充分解释(如果您需要进一步澄清,请在评论中告诉我)。

使用lodash fp,代码将更加简洁(你可以摆脱部分),但是,我不认为你正在使用那个版本所以我决定使用“普通”lodash去寻找解决方案。

希望能帮助到你。

const groupByGroupName = _.partial(_.groupBy, _, 'groupName');
const getBreakdowns = _.partial(_.get, _, 'breakdowns');
const addBreakdownQtties = _.partial(_.sumBy, _, 'quantity');
const getBreakdownQtty = _.flowRight(addBreakdownQtties, getBreakdowns);
const getBreakdownsQtties = _.partial(_.map, _, getBreakdownQtty);
const getQttiesGroupedByName = _.partial(_.mapValues, _, getBreakdownsQtties);
const addGroupQtties = _.partial(_.mapValues, _, _.sum);
const getTotalsByGroupName = _.flowRight(addGroupQtties, getQttiesGroupedByName, groupByGroupName);

const newProcessData = [{
    "processType": "ABC Type1",
    "processSource": "ABC Source1",
    "groupName": "G1",
    "breakdowns": [{
      "size": "S",
      "quantity": 20,
    },
    {
      "size": "S",
      "quantity": 10,
    },
    {
      "size": "S",
      "quantity": 15,
    }]
  },
  {
    "processType": "ABC Type1",
    "processSource": "ABC Source1",
    "groupName": "G1",
    "breakdowns": [{
      "size": "S",
      "quantity": 20,
    },
    {
      "size": "S",
      "quantity": 10,
    },
    {
      "size": "S",
      "quantity": 15,
    }]
  },
  {
    "processType": "ABC Type2",
    "processSource": "ABC Source2",
    "groupName": "G2",
    "breakdowns": [{
      "size": "S",
      "quantity": 20,
    }]
  }
];

console.log("Total quantities grouped by name", getTotalsByGroupName(newProcessData));
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.