Create an array of object properties for each item that has the same key

Question

I'm merging two objects together to create a filter object. However I want to group the merged objects property values where the keys are the same.

So...

[{category: 'furniture'}, {category: 'mirrors'}, {availability: 'in_stock'}]

becomes

[{category: ['furniture', 'mirrors']}, {availability: 'in_stock'}]

any ideas?

Answer 1

With lodash you merge the entire array to a new object by spreading into _.mergeWith(). The customizer should use empty arrays as default values for the current values, and concat the values. Use _.map() to convert back to an array.

const data = [{category: 'furniture'}, {category: 'mirrors'}, {availability: 'in_stock'}];

const result = _.map(
  _.mergeWith({}, ...data, (a = [], b = [], key) => a.concat(b)),
  (val, key) => ({ [key]: val })
)

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>

Using vanilla JS, reduce the array to a Map using the objects' keys as the keys of the Map, with an empty array as the value, and push the objects' values into the arrays. Use Array.from() to convert the Map to an array.

const data = [{category: 'furniture'}, {category: 'mirrors'}, {availability: 'in_stock'}];

const result = Array.from(
  data.reduce((acc, obj) => {
    Object.entries(obj)
      .forEach(([key, val]) => {
        if(!acc.has(key)) acc.set(key, [])

        acc.get(key).push(val)
      })

    return acc
  }, new Map()),
  ([key, val]) => ({ [key]: val })
)

console.log(result)

Answer 2

You can use reduce like this:

const data = [
  { category: 'furniture' }, 
  { category: 'mirrors' }, 
  { availability: 'in_stock' }
];

const result = data.reduce(
  (a, x) => {
    const key = Object.keys(x)[0]; // find the key of the current object
    if (!a.tmp[key]) { // if the current key doesn't exist in the lookup object (tmp) yet ...
      a.tmp[key] = []; // create an empty array in the lookup object for the current key
      a.result.push({ [key]: a.tmp[key] }); // push the current object to the result
    }
    a.tmp[key].push(x[key]); // push the current value to the array
    return a;
  }, 
  { result: [], tmp: {} },
).result;

console.log(result);

I'm sure there are easier ways to achieve this, but that's the best I can come up with right now.

Answer 3

we can also achieve this by using forEach loop :

const input = [{category: 'furniture'}, {category: 'mirrors'}, {availability: 'in_stock'}];

const resultObj = {};
const resultArr = [];

input.forEach((obj) => {
  resultObj[Object.keys(obj)[0]] = [];
})

input.forEach((obj) => {
  resultObj[Object.keys(obj)[0]].push(obj[Object.keys(obj)[0]]);
  resultArr.push(resultObj);
})

console.log([...new Set(resultArr)]);

Answer 4

Another one reduce solution

const arr = [{category: 'furniture', category2: 'furniture2'}, {category: 'mirrors'}, {availability: 'in_stock'}]


const result = Object.values(arr
  .flatMap((obj) => Object.entries(obj))
  .reduce((acc, [key, value]) => {
    acc[key] = acc[key] 
      ? {[key]: [...acc[key][key], value] } 
      : {[key]: [value] }
  
  return acc;
  }, {}));
  
console.log(result)

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

Answer 5

A generic implementation could achieve a merger of any kind of objects regardless of amount and kind of an(y) object's property names.

Since the result of such an implementation is an object, one needs additional treatment in order to cover the OP's requirement(s).

function mergeAndCollectItemEntries(result, item) {
  // return the programmatically aggregated merger/result.
  return Object
    // get an item's entry array.
    .entries(item)
    // for each key-value pair ...
    .reduce((merger, [key, value]) => {

      // ... access and/or create a `key` specific array ...
      // ... and push `value` into this array.
      (merger[key] ??= []).push(value);

      // return the programmatically aggregated merger/result.
      return merger;

    }, result);
}

const sampleData = [
  { category: 'furniture' },
  { category: 'mirrors' },
  { availability: 'in_stock' },
];
const mergedData = sampleData
  .reduce(mergeAndCollectItemEntries, {});

const mergedDataList = Object
  .entries(
    sampleData
      .reduce(mergeAndCollectItemEntries, {})
  ) 
  .map(entry => Object.fromEntries([entry]));
//.map(([key, value]) => ({ [key]: value }));

console.log({
  sampleData,
  mergedData,
  mergedDataList,
});
console.log(
  Object
    .entries([
        { category: 'furniture', foo: 'baz' },
        { category: 'mirrors', bar: 'bizz' },
        { availability: 'in_stock', bar: 'buzz' },
      ].reduce(
        mergeAndCollectItemEntries, {}
      )
    ).map(
      ([key, value]) => ({ [key]: value })
    //entry => Object.fromEntries([entry])
    )
);

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

Answer 6

Another approach here with building an tracking object to merge the values.

Handle the cases of single value keep as string and multiple values as array per the expected output.

const merge = (arr, output = {}) => {
  arr.forEach((item) => {
    const [[key, val]] = Object.entries(item);
    if (key in output) {
      output[key] = Array.isArray(output[key])
        ? output[key].concat(val)
        : [output[key]].concat(val);
    } else {
      output[key] = val;
    }
  });
  return Object.entries(output).map(([key, val]) => ({ [key]: val }));
};

const data = [
  { category: "furniture" },
  { category: "mirrors" },
  { availability: "in_stock" },
];

console.log(merge(data));