Merge values of objects with same keys into an array using lodash

Question

I have an array of objects which looks like this:

const childrens = [
    { orderName: "#1004" },
    { orderName: "#1006" },
    { orderName: "#1007" },
    { orderName: "#1005" },
    { deliveryDate: "25-25-25" },
    { signature: "xq" },
  ];

I want this to be converted into object and have values of same keys as an array of values like this

{
  orderName: [ '#1004', '#1006', '#1007', '#1005' ],
  deliveryDate: [ '25-25-25' ],
  signature: [ 'xq' ]
}

The way i'm doing this right now is by using a reduce function like this

_.reduce(
    childrens,
    (acc, cur) => {
      const pairs = _.chain(cur).toPairs().flatten().value();

      if (acc[pairs[0]] === undefined) {
        acc[pairs[0]] = [pairs[1]];
      } else {
        acc[pairs[0]].push(pairs[1]);
      }

      return acc;
    },
    {},
  );

I'm wondering if there's a cleaner way using built-in lodash functions?

Ori Drori · Accepted Answer · 2021-07-14 12:42:48Z

3

You can use _.mergeWith() with array spread. When merging 2 values, check if the 1st (a) is still undefined (the empty object), if so return the 2nd item wrapped in an array, if it exists, use array spread to concat them:

const children = [{"orderName":"#1004"},{"orderName":"#1006"},{"orderName":"#1007"},{"orderName":"#1005"},{"deliveryDate":"25-25-25"},{"signature":"xq"}];

const result = _.mergeWith({}, ...children, (a, b) => 
  _.isUndefined(a) ? [b] : [...a, b]
);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

answered Jul 14, 2021 at 12:42

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user16172269 Over a year ago

Thanks! this was exactly what i was looking for

user16172269 Over a year ago

can you tell me how lodash magically assigns key to the relating values? i tried to read about this mergeWith function in the docs but didn't understand how. I tried logging values of a and b inside the mergeWith function and this is what i got, the thing i don't understand is how they were linked to correct keys... ``` { a: undefined, b: '#1004' } { a: [ '#1004' ], b: '#1006' } { a: [ '#1004', '#1006' ], b: '#1007' } { a: [ '#1004', '#1006', '#1007' ], b: '#1005' } { a: undefined, b: '25-25-25' } { a: undefined, b: 'mk' } ```

Ori Drori Over a year ago

The _.mergeWith() customizer is called when merging the values of each key. You can see the parameters pass to the customizer ((objValue, srcValue, key, object, source, stack)), and the 3rd one is the key. Essentially it does when the vanilla answers for this question do, it iterates the items, iterates the keys of the current item, ands the relevant value of each key to the end object current values. It just use the customizer to decide how to handle each value.

ikhvjs · Accepted Answer · 2021-07-14 12:41:15Z

1

If you don't use lodash, you can do like below.

const children = [
  { orderName: "#1004" },
  { orderName: "#1006" },
  { orderName: "#1007" },
  { orderName: "#1005" },
  { deliveryDate: "25-25-25" },
  { signature: "xq" },
];

const output = children.reduce((a, b) => {
  const key = Object.keys(b)[0];
  if (!a[key]) {
    a[key] = [b[key]];
  } else {
    a[key].push(b[key]);
  }
  return a;
}, {});

console.log(output);

answered Jul 14, 2021 at 12:41

ikhvjs

6,0874 gold badges24 silver badges53 bronze badges

Comments

SimonR · Accepted Answer · 2021-07-14 12:43:14Z

0

Something like this will work on modern JS platforms (added bonus, you don't need lodash to use reduce). Essentially:

loop over each item in childrens
get the key(s) for that object
loop over the key(s)
- if result doesn't have that key set it to an empty array
- push the value for the key to the relevant array on the result

const desiredOutput = childrens.reduce(
  (acc, current) => {
    const keys = Object.keys(current);
    keys.forEach(key => {
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(current[key]);
    });
    return acc;
  },
  {}
);

answered Jul 14, 2021 at 12:43

SimonR

1,2789 silver badges10 bronze badges

Comments

DecPK · Accepted Answer · 2021-07-14 12:44:58Z

0

You can simply get the result using vanilla JS using reduce and Object.entries

(acc[prop] = acc[prop] ?? []).push(value);

const childrens = [
  { orderName: "#1004" },
  { orderName: "#1006" },
  { orderName: "#1007" },
  { orderName: "#1005" },
  { deliveryDate: "25-25-25" },
  { signature: "xq" },
];

const result = childrens.reduce((acc, curr) => {
  const [[prop, value]] = Object.entries(curr);
  (acc[prop] = acc[prop] ?? []).push(value);
  return acc;
}, {});

console.log(result);

answered Jul 14, 2021 at 12:44

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

Merge values of objects with same keys into an array using lodash

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related