Merge JavaScript objects in array with same key

Question

What is the best way to merge array contents from JavaScript objects sharing a key in common?

How can array in the example below be reorganized into output? Here, all value keys (whether an array or not) are merged into all objects sharing the same name key.

var array = [
    {
        name: "foo1",
        value: "val1"
    }, {
        name: "foo1",
        value: [
            "val2",
            "val3"
        ]
    }, {
        name: "foo2",
        value: "val4"
    }
];

var output = [
    {
        name: "foo1",
        value: [
            "val1",
            "val2",
            "val3"
        ]
    }, {
        name: "foo2",
        value: [
            "val4"
        ]
    }
];

is array {name:"foo1",value:"val1"} going to be {name:"foo1",value:["val1"]}? — BenG
– BenG, Commented Nov 22, 2015 at 0:57
@BG101 no it's not an array but if that helps I can make it beforehand — zdebruine
– zdebruine, Commented Nov 22, 2015 at 1:00
Have you tried using jQuery's extend() method ? Or are you trying to write your own merging script ? So something like this maybe: var newArray = $.extend({}, array, output); — user3186219
– user3186219, Commented Nov 22, 2015 at 1:09
Is there a specific way you're trying to merge the content, or would $.extend() suffice ? — user3186219
– user3186219, Commented Nov 22, 2015 at 1:13
@ZachPerkitny I'm not sure $.extend() would suffice because I do have to deal with arrays within the key values. — zdebruine
– zdebruine, Commented Nov 22, 2015 at 1:18

BenG · Accepted Answer · 2018-10-25 07:46:49Z

75

Here is one option:-

var array = [{
  name: "foo1",
  value: "val1"
}, {
  name: "foo1",
  value: ["val2", "val3"]
}, {
  name: "foo2",
  value: "val4"
}];

var output = [];

array.forEach(function(item) {
  var existing = output.filter(function(v, i) {
    return v.name == item.name;
  });
  if (existing.length) {
    var existingIndex = output.indexOf(existing[0]);
    output[existingIndex].value = output[existingIndex].value.concat(item.value);
  } else {
    if (typeof item.value == 'string')
      item.value = [item.value];
    output.push(item);
  }
});

console.dir(output);

edited Oct 25, 2018 at 7:46

answered Nov 22, 2015 at 1:32

BenG

15.2k5 gold badges48 silver badges62 bronze badges

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

3 Comments

Arpit Kumar Over a year ago

My key and value name are different. and I am getting confused because here the value name in input object is value and the parameter name you have taken in the forEach loop is also named value. Please make my confusion clear. Thanks.

BenG Over a year ago

Sorry @ArpitMeena, only now seen your request in the comments. I've changed it to item to help in future.

sasha romanov Over a year ago

what if i have an array with multiple objects all have share one same key , but this key is unknow, for example one of the objects structure is { "127.0.0.1" : 1, "127.0.0.2" : 1, "127.0.0.3" : 1, "127.0.0.4" : 1, } and the second object { "127.0.0.1" : 1000, "127.0.0.2" : 1000, "127.0.0.3" : 1000, "127.0.0.4" : 1000, }, how to merge them so the output, be something lke this {"127.0.0.1": 1, "my-custom-key": 1000}, second obj etc..... ps the values could be different i just made a simple example.

Avraham · Accepted Answer · 2019-08-12 03:25:16Z

20

Here is another way of achieving that goal:

var array = [{
  name: "foo1",
  value: "val1"
}, {
  name: "foo1",
  value: [
    "val2",
    "val3"
  ]
}, {
  name: "foo2",
  value: "val4"
}];

var output = array.reduce(function(o, cur) {

  // Get the index of the key-value pair.
  var occurs = o.reduce(function(n, item, i) {
    return (item.name === cur.name) ? i : n;
  }, -1);

  // If the name is found,
  if (occurs >= 0) {

    // append the current value to its list of values.
    o[occurs].value = o[occurs].value.concat(cur.value);

    // Otherwise,
  } else {

    // add the current item to o (but make sure the value is an array).
    var obj = {
      name: cur.name,
      value: [cur.value]
    };
    o = o.concat([obj]);
  }

  return o;
}, []);

console.log(output);

edited Aug 12, 2019 at 3:25

Avraham

9781 gold badge14 silver badges28 bronze badges

answered Nov 22, 2015 at 2:21

Hunan Rostomyan

2,1762 gold badges22 silver badges31 bronze badges

1 Comment

Swapnil Sudhir Over a year ago

What to do In case If I need to add the vaue as an object ?

Nguyễn Văn Phong · Accepted Answer · 2021-04-03 16:06:13Z

15

2021 version

Using reduce to aggregate data.
Using logical nullish assignment only assigns if acc[name] is nullish (null or undefined).
Using Array.isArray to determines whether the passed value is an Array.

var arrays = [{ name: "foo1",value: "val1" }, {name: "foo1", value: ["val2", "val3"] }, {name: "foo2",value: "val4"}];

const result = arrays.reduce((acc, {name, value}) => {
  acc[name] ??= {name: name, value: []};
  if(Array.isArray(value)) // if it's array type then concat 
    acc[name].value = acc[name].value.concat(value);
  else
    acc[name].value.push(value);
  
  return acc;
}, {});

console.log(Object.values(result));

edited Apr 3, 2021 at 16:06

answered Apr 3, 2021 at 15:53

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

2 Comments

Mekel Ilyasa Over a year ago

Hi, newbie here. What does ??= mean?

Nguyễn Văn Phong Over a year ago

Hi @MekelIlyasa, it means logical nullish assignment. It equals checking condition if(!acc[name]) acc[name] = {name: name, value: []}

paolobueno · Accepted Answer · 2015-12-07 13:20:25Z

11

Using lodash

var array = [{name:"foo1",value:"val1"},{name:"foo1",value:["val2","val3"]},{name:"foo2",value:"val4"}];

function mergeNames (arr) {
    return _.chain(arr).groupBy('name').mapValues(function (v) {
        return _.chain(v).pluck('value').flattenDeep();
    }).value();
}

console.log(mergeNames(array));

edited Dec 7, 2015 at 13:20

answered Nov 22, 2015 at 2:07

paolobueno

1,69810 silver badges9 bronze badges

2 Comments

Softmixt Over a year ago

simplified version and also pluck now should be map :

const mergeNames = arr => _.chain(arr).groupBy('name').mapValues(v => _.chain(v).map('value').flattenDeep()).value();  console.log(mergeNames(array));

Swapnil Sudhir Over a year ago

The data is coming in '2021-04-14': LodashWrapper { wrapped: LazyWrapper { wrapped: [LodashWrapper], actions: [Array], dir: 1, filtered: false, iteratees: [Array], takeCount: 4294967295, views: [] }, actions: [ [Object] ], chain: true, index: 0, values: undefined } this format. how to transform it in array format ?

trincot · Accepted Answer · 2021-04-03 16:16:24Z

9

Here is a version using an ES6 Map:

const arrays = [{ name: "foo1",value: "val1" }, {name: "foo1", value: ["val2", "val3"] }, {name: "foo2",value: "val4"}];

const map = new Map(arrays.map(({name, value}) => [name, { name, value: [] }])); 
for (let {name, value} of arrays) map.get(name).value.push(...[value].flat());
console.log([...map.values()]);

answered Apr 3, 2021 at 16:16

trincot

357k38 gold badges282 silver badges338 bronze badges

Comments

unamaga · Accepted Answer · 2018-01-02 02:31:36Z

4

Using reduce:

var mergedObj = array.reduce((acc, obj) => {
    if (acc[obj.name]) {
       acc[obj.name].value = acc[obj.name].value.isArray ? 
       acc[obj.name].value.concat(obj.value) : 
       [acc[obj.name].value].concat(obj.value);

    } else {
      acc[obj.name] = obj;
    }

    return acc;
}, {});

let output = [];
for (let prop in mergedObj) {
  output.push(mergedObj[prop]) 
}

answered Jan 2, 2018 at 2:31

unamaga

533 bronze badges

Comments

Brandon McConnell · Accepted Answer · 2021-01-30 20:26:36Z

It's been a while since this question was asked, but I thought I'd chime in as well. For functions like this that execute a basic function you'll want to use over and over, I prefer to avoid longer-written functions and loops if I can help it and develop the function as a one-liner using shallow Array.prototype functions like .map() and some other ES6+ goodies like Object.entries() and Object.fromEntries(). Combining all these, we can execute a function like this relatively easily.

First, I take in however many objects you pass to the function as a rest parameter and prepend that with an empty object we'll use to collect all the keys and values.

[{}, ...objs]

Next, I use the .map() Array prototype function paired with Object.entries() to loop through all the entries of each object, and any sub-array elements each contains and then either set the empty object's key to that value if it has not yet been declared, or I push the new values to the object key if it has been declared.

[{},...objs].map((e,i,a) => i ? Object.entries(e).map(f => (a[0][f[0]] ? a[0][f[0]].push(...([f[1]].flat())) : (a[0][f[0]] = [f[1]].flat()))) : e)[0]

Finally, to replace any single-element-arrays with their contained value, I run another .map() function on the result array using both Object.entries() and Object.fromEntries(), similar to how we did before.

let getMergedObjs = (...objs) => Object.fromEntries(Object.entries([{},...objs].map((e,i,a) => i ? Object.entries(e).map(f => (a[0][f[0]] ? a[0][f[0]].push(...([f[1]].flat())) : (a[0][f[0]] = [f[1]].flat()))) : e)[0]).map(e => e.map((f,i) => i ? (f.length > 1 ? f : f[0]) : f)));

This will leave you with the final merged object, exactly as you prescribed it.

let a = {
  a: [1,9],
  b: 1,
  c: 1
}
let b = {
  a: 2,
  b: 2
}
let c = {
  b: 3,
  c: 3,
  d: 5
}

let getMergedObjs = (...objs) => Object.fromEntries(Object.entries([{},...objs].map((e,i,a) => i ? Object.entries(e).map(f => (a[0][f[0]] ? a[0][f[0]].push(...([f[1]].flat())) : (a[0][f[0]] = [f[1]].flat()))) : e)[0]).map(e => e.map((f,i) => i ? (f.length > 1 ? f : f[0]) : f)));

getMergedObjs(a,b,c); // { a: [ 1, 9, 2 ], b: [ 1, 2, 3 ], c: [ 1, 3 ], d: 5 }

JoeH · Accepted Answer · 2021-12-08 09:40:03Z

4

Use lodash "uniqWith". As shown below

let _ = require("lodash");

var array = [
  { name: "foo1", value: "1" },
  { name: "foo1", value: "2" },
  { name: "foo2", value: "3" },
  { name: "foo1", value: "4" }
];

let merged = _.uniqWith(array, (pre, cur) => {
  if (pre.name == cur.name) {
    cur.value = cur.value + "," + pre.value;
    return true;
  }
  return false;
});

console.log(merged);
// output:  [{ name: "foo1", value: "1,2,4" }, { name: "foo2", value: "3" }];

answered Dec 8, 2021 at 9:40

JoeH

5571 gold badge4 silver badges11 bronze badges

1 Comment

Aaron Over a year ago

how would I go about doing exactly this, but get the sum of foo1 values to be 7? (1+2+4)

Racil Hilan · Accepted Answer · 2015-11-22 02:09:46Z

3

Try this:

var array = [{name:"foo1",value:"val1"},{name:"foo1",value:["val2","val3"]},{name:"foo2",value:"val4"},{name:"foo2",value:"val5"}];

for(var j=0;j<array.length;j++){
  var current = array[j];
  for(var i=j+1;i<array.length;i++){
    if(current.name = array[i].name){
      if(!isArray(current.value))
        current.value = [ current.value ];
      if(isArray(array[i].value))
         for(var v=0;v<array[i].value.length;v++)
           current.value.push(array[i].value[v]);
      else
        current.value.push(array[i].value);
      array.splice(i,1);
      i++;
    }
  }
}

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

document.write(JSON.stringify(array));

answered Nov 22, 2015 at 2:09

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

2 Comments

zdebruine Over a year ago

this is foolproof, but it's the traditional brute force method that I'm trying to get around.

Racil Hilan Over a year ago

Yeah, but I did not use "endless" loops :-), I only used two loops and more importantly, I worked directly on the array variable eliminating the need for another output variable which makes it more memory efficient. However, I also liked the two answers from BG101 and Hunan, so I upvoted them.

qahtan said · Accepted Answer · 2020-12-01 07:09:00Z

3

This work too !

      var array = [
        {
          name: "foo1",
          value: "val1",
        },
        {
          name: "foo1",
          value: ["val2", "val3"],
        },
        {
          name: "foo2",
          value: "val4",
        },
      ];
      let arr2 = [];
      array.forEach((element) => { // remove duplicate name
        let match = arr2.find((r) => r.name == element.name);
        if (match) {
        } else {
          arr2.push({ name: element.name, value: [] });
        }
      });
      arr2.map((item) => {
        array.map((e) => {
          if (e.name == item.name) {
            if (typeof e.value == "object") { //lets map if value is an object
              e.value.map((z) => {
                item.value.push(z);
              });
            } else {
              item.value.push(e.value);
            }
          }
        });
      });
      console.log(arr2);

answered Dec 1, 2020 at 7:09

qahtan said

811 silver badge5 bronze badges

2 Comments

Mars2024 Over a year ago

How could you Add the values of foo1? Basically add val1, val2, and val3 into 1 value?

qahtan said Over a year ago

i'm using temp arr2 to save the value, then mapping them again to see is an object, then i create an array on it, if not an object/array i push the value to it @jedLancer

vigrahalaprasad · Accepted Answer · 2020-06-04 10:38:04Z

const exampleObj = [{
  year: 2016,
  abd: 123
}, {
  year: 2016,
  abdc: 123
}, {
  year: 2017,
  abdcxc: 123
}, {
  year: 2017,
  abdcxcx: 123
}];
const listOfYears = [];
const finalObj = [];
exampleObj.map(sample => {    
  listOfYears.push(sample.year);
});
const uniqueList = [...new Set(listOfYears)];
uniqueList.map(list => {   
  finalObj.push({
    year: list
  });
});
exampleObj.map(sample => {    
  const sampleYear = sample.year;  
  finalObj.map((obj, index) => {     
    if (obj.year === sampleYear) {        
      finalObj[index] = Object.assign(sample, obj);       
    }  
  }); 
});

The final object be [{"year":2016,"abdc":123,"abd":123},{"year":2017,"abdcxcx":123,"abdcxc":123}]

LookWorld · Accepted Answer · 2021-01-10 15:01:24Z

2

try this :

    var array = [
      {
          name: "foo1",
          value: "val1"
      }, {
          name: "foo1",
          value: [
              "val2",
              "val3"
          ]
      }, {
          name: "foo2",
          value: "val4"
      }
  ];
  
  var output = [
      {
          name: "foo1",
          value: [
              "val1",
              "val2",
              "val3"
          ]
      }, {
          name: "foo2",
          value: [
              "val4"
          ]
      }
  ];

  bb = Object.assign( {}, array, output );

console.log(bb) ;

answered Jan 10, 2021 at 15:01

LookWorld

413 bronze badges

Comments

Gil · Accepted Answer · 2022-02-19 12:48:44Z

2

const array = [{ name: "foo1", value: "val1" }, {name: "foo1", value: ["val2", "val3"] }, {name: "foo2", value: "val4"}];
const start = array.reduce((object, {name}) => ({...object, [name]: []}), {});
const result = array.reduce((object, {name, value}) => ({...object, [name]: [object[name], [value]].flat(2)}), start);
const output = Object.entries(result).map(([name, value]) => ({name: name, value: value}));
console.log(output);

answered Feb 19, 2022 at 12:48

Gil

214 bronze badges

Comments

Rodrigo Rodrigues · Accepted Answer · 2022-09-27 19:25:33Z

2

I was looking for a quick, almost "one-liner" answer in this thread, provided that this is a trivial but common exercise.

I couldn't find any for my like. The other answers are fine but I am not much into boilerplate.

So, let me add one, then:

o = array.reduce((m,{name:n,value:v})=>({...m,[n]:[...m[n]||[],v].flat(1)}),{})
output = Object.entries(o).map(([n,v])=>({name:n,value:v}))

var array = [
  { name: "foo1", value: "val1"}, 
  { name: "foo1", value: ["val2","val3"] }, 
  { name: "foo2", value: "val4" }
]

o=array.reduce((m,{name:n,value:v})=>({...m,[n]:[...m[n]||[],v].flat(1)}),{})
output=Object.entries(o).map(([n,v])=>({name:n,value:v}))
    
console.log(output)

edited Sep 27, 2022 at 19:25

answered Sep 26, 2022 at 22:17

Rodrigo Rodrigues

8,6321 gold badge32 silver badges43 bronze badges

Comments

optimus · Accepted Answer · 2022-04-17 16:12:04Z

1

A much more easier approach is this 2022:

  var array = [
        {
            name: "foo1",
            value: "val1"
        }, {
            name: "foo1",
            value: [
                "val2",
                "val3"
            ]
        }, {
            name: "foo2",
            value: "val4"
        }
    ];
    
    var output = [
        {
            name: "foo1",
            value: [
                "val1",
                "val2",
                "val3"
            ]
        },
        {
            name: "foo2",
            value: [
                "val4"
            ]
        }
    ];
    
    function mergeBasedOnKey(list){
      let c = Object.values(list.reduce((a, b) => {
    
        a[b.name] = a[b.name] || {name: b.name, value: []}
        if(typeof(b['value']) == "string"){
          a[b.name].value.push(b['value'])
        }
        else{
          a[b.name].value = [...a[b.name].value, ...b.value]
        }
    
        return a
    
      }, {}))
      return c
    }
   let ans = mergeBasedOnKey(array)
   console.log(ans)

answered Apr 17, 2022 at 16:12

optimus

5811 bronze badges

1 Comment

DineshMsd Over a year ago

you are a life saver! very cool way to achieve this! Literally I tried all answers those are good. but this is awesome thanks!

Stuart · Accepted Answer · 2023-09-08 09:31:11Z

For anyone like me who landed here looking for a solution to a very similar issue...

My scenario was a bit different...

This was my solution using _.mergeWith

// pre grouped array with _.groupBy
const source = {
    obj1: [{label: null, count: null }, {label: null, count: 10 }, {label: 'value1', count: null }],
    obj2: [{label: 'value2', count: 5 }, {label: null, count: null }],
    obj3: [{label: null, count: null }, {label: null, count: null }, {label: null, count: 15 }, {label: 'value3', count: null }],
    obj4: [{label: null, count: null }, {label: null, count: null }, {label: null, count: null }, {label: null, count: null }],
}

function combineObjects(key, source) {
    // spread the source array so not to mutate the original source with `.shift()` when getting the first object to merge with
    return _.mergeWith([...source[key]].shift(), ...source[key], (objValue, srcValue) => {
        if (srcValue !== null) return srcValue
        return objValue
    })
}

const combinedObjects = Object.keys(source).map(key => combineObjects(key, source))

// combinedObjects -> [{label: 'value1', count: 10 },{label: 'value2', count: 5 },{label: 'value3', count: 15 }, {label: null, count: null}]

Hope this might help someone with a similar scenario I faced.

Collectives™ on Stack Overflow

Merge JavaScript objects in array with same key

16 Answers 16

3 Comments

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Use lodash "uniqWith". As shown below

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

3 Comments

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Use lodash "uniqWith". As shown below

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related