Reduce array according to grouping condition in reactjs

Question

I have the array:

array = [
    {
        id: 1,
        count: 0.5
        cost: 100
        user: {id: 1, name: "John 1"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 2,
        count: 2.5
        cost: 200
        user: {id: 1, name: "John 1"},
        type: {id: 2, name: "T2"},
        period: {id: 2, name: "2022"}
    },
    {
        id: 3,
        count: 2.5
        cost: 400
        user: {id: 1, name: "John 1"},
        type: {id: 2, name: "T2"},
        period: {id: 2, name: "2022"}
    },
    {
        id: 4,
        count: 1.5
        cost: 100
        user: {id: 2, name: "John 2"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 5,
        count: 0.5
        cost: 500
        user: {id: 3, name: "John 3"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    }
]

I need to reduce in two different ways.

First: grouping by user, period and type, where the cost is the sum of the cost of those that match according to the previous condition.

array1 = [
    {
        id: 1,
        count: 0.5
        cost: 100
        user: {id: 1, name: "John 1"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 2,
        count: 2.5
        cost: 600
        user: {id: 1, name: "John 1"},
        type: {id: 2, name: "T2"},
        period: {id: 2, name: "2022"}
    },
    {
        id: 3,
        count: 1.5
        cost: 100
        user: {id: 2, name: "John 2"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 4,
        count: 0.5
        cost: 500
        user: {id: 3, name: "John 3"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    }
]

Second: group in the same way but the cost is an element that contains the cost that match.

array2 = [
    {
        id: 1,
        count: 0.5
        cost: 100
        user: {id: 1, name: "John 1"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 2,
        count: 2.5
        cost: [{200},{400}]
        user: {id: 1, name: "John 1"},
        type: {id: 2, name: "T2"},
        period: {id: 2, name: "2022"}
    },
    {
        id: 3,
        count: 1.5
        cost: 100
        user: {id: 2, name: "John 2"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 4,
        count: 0.5
        cost: 500
        user: {id: 3, name: "John 3"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    }
]

Note: for the same user, type and period, it will always be the same account

How can I do it? Thank!

Update: I tried

const array1 = array((acc, elem) => {
      if (acc.some((accElem) => accElem.user.id === elem.user.id && accElem.period.id === elem.period.id && accElem.type.id === elem.type.id)) {
        elem.cost = array
          .filter((e) => e.user.id === elem.user.id && e.period.id === elem.period.id && e.type.id === elem.type.id)
          .reduce((acc, e) => acc + e.cost, 0);
        ...
      }
      
      if (acc.some((accElem) => accElem.user.id === elem.user.id && accElem.period.id === elem.period.id && accElem.type.id !== elem.type.id)) {
          elem.cost = array
            .filter((e) => e.user.id === elem.user.id && e.period.id === elem.period.id && e.type.id === elem.type.id)
            .reduce((acc, e) => e.cost, 0);
         ...
        }

      return acc.concat(elem);
    }, []);

What have you tried so far and what's the problem with your approach? — Pratansyah
– Pratansyah, Commented Jun 7, 2021 at 15:52
I need to be able to group in the same row or show the values in a row with the sum of the corresponding cost. And see which way is best for performance. — bonnegnu
– bonnegnu, Commented Jun 7, 2021 at 15:54
best way to learn is to try, then ask for help when you get stuck — Kinglish
– Kinglish, Commented Jun 7, 2021 at 15:54

Shyam · Accepted Answer · 2021-06-07 16:20:26Z

const input =  [
    {
        id: 1,
        count: 0.5,
        cost: 100,
        user: {id: 1, name: "John 1"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 2,
        count: 2.5,
        cost: 200,
        user: {id: 1, name: "John 1"},
        type: {id: 2, name: "T2"},
        period: {id: 2, name: "2022"}
    },
    {
        id: 3,
        count: 2.5,
        cost: 400,
        user: {id: 1, name: "John 1"},
        type: {id: 2, name: "T2"},
        period: {id: 2, name: "2022"}
    },
    {
        id: 4,
        count: 1.5,
        cost: 100,
        user: {id: 2, name: "John 2"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    },
    {
        id: 5,
        count: 0.5,
        cost: 500,
        user: {id: 3, name: "John 3"},
        type: {id: 1, name: "T1"},
        period: {id: 1, name: "2021"}
    }
]

const firstGroup = JSON.parse(JSON.stringify(input)).reduce((groupedData, user) => {
      const matchingUserIndex = groupedData.length > 0 && groupedData.findIndex(groupedUser => groupedUser.user.id === user.user.id && groupedUser.type.id === user.type.id && groupedUser.period.id === user.period.id);
      if(matchingUserIndex && matchingUserIndex !== -1){
        groupedData[matchingUserIndex].cost += user.cost
      } else {
        groupedData.push(user);
      } 
  
  return groupedData
  
}, [])

console.log('First Group ********** \n', firstGroup)


const secondGroup = JSON.parse(JSON.stringify(input)).reduce((groupedData, user) => {
      const matchingUserIndex = groupedData.length > 0 && groupedData.findIndex(groupedUser => groupedUser.user.id === user.user.id && groupedUser.type.id === user.type.id && groupedUser.period.id === user.period.id);
      if(matchingUserIndex && matchingUserIndex !== -1){
        if(Array.isArray(groupedData[matchingUserIndex].cost)){
          groupedData[matchingUserIndex].cost.push(user.cost)
        } else {
           groupedData[matchingUserIndex].cost = [groupedData[matchingUserIndex].cost, user.cost]
        }
      } else {
        groupedData.push(user);
      } 
  
  return groupedData
  
}, [])

console.log('second Group ********** \n', secondGroup)

Collectives™ on Stack Overflow

Reduce array according to grouping condition in reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related