Combine an array of objects into a single unique object in JavaScript

Question

Combine an array of objects into a single unique object in JavaScript

I'm trying to merge an array of objects into a single object, ensuring that each value is distinct. However, my current code isn't producing the output I want. Can someone assist me with this?

Sample Input: 
    [{
        "obj1" : "value1",
        "obj2" : ["abc", "def"],
        "obj3" : ["ghi"],
        "obj4" : "value4",
    },
    {
        "obj1" : "value2",
        "obj2" : ["abc", "mno"],
        "obj3" : ["klm"],
        "obj4" : "value4",
    }]


Desired Output:
{
    "obj1" : ["value1","value2"]
    "obj2" : ["abc", "def","mno"],
    "obj3" : ["ghi","klm"],
    "obj4" : ["value4"]
}

My Current Code:
const result = filterData.reduce((a,c) => (Object.keys(c).map(k => a[k] = [...a[k] || [], c[k]]), a), {})

javascript arrays json typescript array-reduce

Answer 1

Answer №1

To combine multiple objects into a single object within an array, you can utilize array#reduce. For obtaining unique values, the Set method comes in handy.

const data = [{ "obj1" : "value1", "obj2" : ["abc", "def"], "obj3" : ["ghi"], "obj4" : "value4", }, { "obj1" : "value2", "obj2" : ["abc", "mno"], "obj3" : ["klm"], "obj4" : "value4", }],
      result = data.reduce((r,o) => {
        Object.keys(o).forEach(k => {
          r[k] = [...new Set((r[k] || []).concat(o[k]))];
        });
        return r;
      },{});
console.log(result);

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

Answer 2

To combine multiple objects into a single object within an array, you can utilize array#reduce. For obtaining unique values, the Set method comes in handy.

const data = [{ "obj1" : "value1", "obj2" : ["abc", "def"], "obj3" : ["ghi"], "obj4" : "value4", }, { "obj1" : "value2", "obj2" : ["abc", "mno"], "obj3" : ["klm"], "obj4" : "value4", }],
      result = data.reduce((r,o) => {
        Object.keys(o).forEach(k => {
          r[k] = [...new Set((r[k] || []).concat(o[k]))];
        });
        return r;
      },{});
console.log(result);

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

Answer 3

Answer №2

Using lodash helpers, I have crafted a solution to your issue.

const inputData = [{
        "obj1" : "value1",
        "obj2" : ["abc", "def"],
        "obj3" : ["ghi"],
        "obj4" : "value4",
    },
    {
        "obj1" : "value2",
        "obj2" : ["abc", "mno"],
        "obj3" : ["klm"],
        "obj4" : "value4",
    }]
    
function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return _.union(objValue, srcValue);
  }
}
    
const outputData = inputData.reduce((acc, cur) => {
  const modifiedCur = _.mapValues(cur, function(o) { return typeof o === 'string' ? [o]: o; }); 
  acc = _.mergeWith(acc, modifiedCur, customizer);
  return acc
},{})    
    
console.log(outputData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Answer 4

Using lodash helpers, I have crafted a solution to your issue.

const inputData = [{
        "obj1" : "value1",
        "obj2" : ["abc", "def"],
        "obj3" : ["ghi"],
        "obj4" : "value4",
    },
    {
        "obj1" : "value2",
        "obj2" : ["abc", "mno"],
        "obj3" : ["klm"],
        "obj4" : "value4",
    }]
    
function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return _.union(objValue, srcValue);
  }
}
    
const outputData = inputData.reduce((acc, cur) => {
  const modifiedCur = _.mapValues(cur, function(o) { return typeof o === 'string' ? [o]: o; }); 
  acc = _.mergeWith(acc, modifiedCur, customizer);
  return acc
},{})    
    
console.log(outputData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Combine an array of objects into a single unique object in JavaScript

Answer №1

Answer №2

Similar questions

Unlocking Secret Data with External JavaScript

The execution of the HTTP request is not happening

Deliver either a Promise or a boolean based on the provided parameters, utilizing a default

Printing keys of objects in an array in AngularJS through iteration

What is the Reactjs method for relocating a button from one div to another upon being clicked?

What is the correct way to convert a JArray into a list of strings?

Exploring JSON documents one line at a time

Is there a potential memory leak issue with Express.js running on Node.js?

Vue - making one element's width match another element's width

What is the best way to use a generic to reference the value of an object in Typescript?

Using Node.js to generate PDF documents and send them directly to the response stream

Tips for calculating the sum of a two-dimensional array

The message from the Discord bot is not displayed in an embedded format

Generating JSON output in Python

Unable to access an HTML element using refs within the render() method

WebGl - texture failed to load

Show an error message in a popup window, following a validation error in Laravel

Sending an array of text values to a Spring MVC endpoint through Jquery's Ajax functionality

Jackson JSON parser can handle recursive type conversions

Steps to avoid the button being submitted twice