javascript how to group and combine single array of object-CodePudding

I have an array of object below,

[
  { locationCode: 'GMP', Qr: 46 },
  { locationCode: 'CMT', Qr: 35 },
  { locationCode: 'GMP', Cash: 29 },
  { locationCode: 'CMT', Cash: 26 },
  { locationCode: 'CMS', Qr: 22 },
  { locationCode: 'CMT', Voucher: 6 },
  { locationCode: 'CMS', Cash: 2 }
]

I want to group locationCode and combine others into one object like this

[
  { locationCode: 'GMP', Qr: 46, Cash: 29 },
  { locationCode: 'CMT', Qr: 35, Cash: 26, Voucher: 6 },
  { locationCode: 'CMS', Qr: 22, Cash: 2 }
]

Can someone explain that with Javascript or lodash, Thanks!

CodePudding user response：

You can easily achieve this result using Map

const arr = [
  { locationCode: "GMP", Qr: 46 },
  { locationCode: "CMT", Qr: 35 },
  { locationCode: "GMP", Cash: 29 },
  { locationCode: "CMT", Cash: 26 },
  { locationCode: "CMS", Qr: 22 },
  { locationCode: "CMT", Voucher: 6 },
  { locationCode: "CMS", Cash: 2 },
];

const map = new Map();
arr.forEach((o) =>
  map.set(o.locationCode, { ...(map.get(o.locationCode) ?? {}), ...o })
);

const result = [...map.values()];
console.log(result);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

CodePudding user response：

You can use Array.reduce to create an object keyed by locationCode, we'd also use object destructuring to assemble the object at each key value.

const input = [
  { locationCode: 'GMP', Qr: 46 },
  { locationCode: 'CMT', Qr: 35 },
  { locationCode: 'GMP', Cash: 29 },
  { locationCode: 'CMT', Cash: 26 },
  { locationCode: 'CMS', Qr: 22 },
  { locationCode: 'CMT', Voucher: 6 },
  { locationCode: 'CMS', Cash: 2 }
]

const result = Object.values(input.reduce((acc, cur) => { 
    acc[cur.locationCode] = acc[cur.locationCode] || { locationCode: cur.locationCode };
    acc[cur.locationCode] = { ...acc[cur.locationCode], ...cur };
    return acc;
}, {}))

console.log('Result:', result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

CodePudding user response：

import React, { PureComponent } from 'react'

class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        {locationCode: 'GMP', Qr: 46},
        {locationCode: 'CMT', Qr: 35},
        {locationCode: 'GMP', Cash: 29},
        {locationCode: 'CMT', Cash: 26},
        {locationCode: 'CMS', Qr: 22},
        {locationCode: 'CMT', Voucher: 6},
        {locationCode: 'CMS', Cash: 2},
      ],
    };
  }

  render() {
    return (
      <div>
        {this.state.data.map((item, i) => {
            console.log(item)
            return (
              <React.Fragment key={i}>
                <h3>{item.locationCode}</h3>
              </React.Fragment>
            );
          })}
      </div>
    )
  }
}

export default App