Javascript how to join two arrays having same property value?

Question

How do I join arrays with the same property value? I cannot map it because it has different indexes.

var array1 = [
        {'label':"label1",'position':0},
        {'label':"label3",'position':2},
        {'label':"label2",'position':1},
    ];

var array2 = [
        {'label':"label1",'value':"TEXT"},
        {'label':"label2",'value':"SELECT"}
     ];

expected output:

var array3 = [
        {'label':"label1",'value':"TEXT",'position':0},
        {'label':"label2",'value':"SELECT", 'position':1}
     ];

This is what I did, I cannot make it work,

var arr3 = arr1.map(function(v, i) {
        return {
            "label": v.label,
            "position": v.position,
            "value": arr2[?].value
        }
   });

Did you mean to leave out label3?, if so you might want to say you want a union too. — Keith, Jul 11 '18 at 11:02
yes I want to remove the label3 and just display 2 as the output — apelidoko, Jul 11 '18 at 11:03
Possible duplicate of [Getting a union of two arrays in JavaScript](https://stackoverflow.com/questions/3629817/getting-a-union-of-two-arrays-in-javascript) — Omar, Jul 11 '18 at 11:04
Possible duplicate of https://stackoverflow.com/questions/51282996/merging-two-array-of-objects-in-angular-6/51283263#51283263 — Leonid Pyrlia, Jul 11 '18 at 11:06

BlackBeard · Accepted Answer · 2018-07-12T02:48:45.760

2

I think you can use array#reduce to do something like this perhaps:

var array1 = [
        {'label':"label1",'position':0},
        {'label':"label3",'position':2},
        {'label':"label2",'position':1},
    ];

var array2 = [
        {'label':"label1",'value':"TEXT"},
        {'label':"label2",'value':"SELECT"}
     ];

var array3 = array2.reduce((arr, e) => {
  arr.push(Object.assign({}, e, array1.find(a => a.label == e.label)))
  return arr;
}, [])


console.log(array3);

edited Jul 12 '18 at 02:48

answered Jul 11 '18 at 11:02

BlackBeard

10,246
7
52
62

This depends on `array2` having all its labels matching in `array1`. – CertainPerformance Jul 11 '18 at 11:04
@CertainPerformance yes. OP can provide a default value in case the value not found. Eg `arr.find() || {default object }` – BlackBeard Jul 11 '18 at 11:10
I think what @CertainPerformance is meaning is say you changed label2 to say label4 in array2, you will get two results, this violates the union requirement. – Keith Jul 11 '18 at 11:16
thank you for your help, i didnt know such function exists – apelidoko Jul 12 '18 at 02:47

Nina Scholz · Answer 2 · 2018-07-11T11:19:34.320

You could take a Map and check the existence for a new object.

var array1 = [{ label: "label1", position: 0 }, { label: "label3", position: 2 }, { label: "label2", position: 1 }],
    array2 = [{ label: "label1", value: "TEXT" }, { label: "label2", value: "SELECT" }],
    map = array1.reduce((m, o) => m.set(o.label, o), new Map),
    array3 = array2.reduce((r, o) => {
        if (map.has(o.label)) {
            r.push(Object.assign({}, o, map.get(o.label)));
        }
        return r;
    }, []);

console.log(array3);

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

score 1 · Answer 3 · edited Jul 11 '18 at 12:11

As per the effort, we take an assumption that array1 will be having all the labels that are in array2.

Based on that first, create a map for array2and with key being labels. Post that, filter out array1 items which have labels existing in the map and then finally merging the objects of the filtered array and its corresponding values in map extracted from array2.

var array1 = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}];
var array2 = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}];
     
let map = array2.reduce((a,{label, ...rest}) => Object.assign(a,{[label]:rest}),{});
let result = array1.filter(({label}) => map[label]).map(o => ({...o, ...map[o.label]}));
console.log(result);

Also, in the above snippet, you can improve the performance further by using Array.reduce against filter and map functions to retrieve the result.

var array1 = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}];
var array2 = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}];
     
let map = array2.reduce((a,{label, ...rest}) => Object.assign(a,{[label]:rest}),{});
let result = array1.reduce((a,o) => {
if(map[o.label]) a.push({...o, ...map[o.label]});
return a;
}, []);
console.log(result);

In Chrome for me run snippet gets -> `"Uncaught SyntaxError: Unexpected token {",` — Keith, Jul 11 '18 at 11:19
@Keith - It does now. A typo changed removed the `,` from `array2`. — Nikhil Aggarwal, Jul 11 '18 at 11:21
@ArmanCharan - It does now. A typo changed removed the `,` from `array2`. — Nikhil Aggarwal, Jul 11 '18 at 11:21

Arman Charan · Answer 4 · 2018-07-11T11:11:32.760

See Array.prototype.map() and Map for more info.

// Input.
const A = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}]
const B = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}]

// Merge Union.
const mergeUnion = (A, B) => {
  const mapA = new Map(A.map(x => [x.label, x]))
  return B.map(y => ({...mapA.get(y.label), ...y}))
}

// Output + Proof.
const output = mergeUnion(A, B)
console.log(output)

score 0 · Answer 5 · answered Jul 11 '18 at 11:07

If you don't know in advance which array(s) will have their labels be a subset of the other (if any), here's a method that allows for either array1 or array2 to have labels that the other array lacks. Use reduce over array1, finding the matching label in array2 if it exists:

var array1 = [
  {'label':"label1",'position':0},
  {'label':"label3",'position':2},
  {'label':"label2",'position':1},
];
var array2 = [
  {'label':"label1",'value':"TEXT"},
  {'label':"label2",'value':"SELECT"}
];

const output = array1.reduce((a, { label, position }) => {
  const foundValueObj = array2.find(({ label: findLabel }) => findLabel === label);
  if (!foundValueObj) return a;
  const { value } = foundValueObj;
  a.push({ label, value, position });
  return a;
}, []);
console.log(output);

Vignesh Raja · Answer 6 · 2018-07-11T11:15:09.170

This works.

Approach: Concatenate the objects with same label, using Object.assign()

var array1 = [{'label':"label1",'position':0},{'label':"label3",'position':2},{'label':"label2",'position':1}];
var array2 = [{'label':"label1",'value':"TEXT"},{'label':"label2",'value':"SELECT"}];
var result = [];

array2.forEach(function(value, index){
    result.push(Object.assign({},array1.find(function(v,i){return v.label==value.label}),value));
});

console.log(result)

score 0 · Answer 7 · answered Jul 11 '18 at 11:24

Im not good with javascript,but you could also do this

    var array1 = [
    {'label':"label1",'position':0},
    {'label':"label3",'position':2},
    {'label':"label2",'position':1},
];

    var array2 = [
    {'label':"label1",'value':"TEXT"},
    {'label':"label2",'value':"SELECT"}
 ];
     var array3=[];
 for(var i=0;i<array1.length;i++)
    {
        for(var x=0;x<array2.length;x++)
        {       
                console.log(array1[i]['label'] == array2[x]['label']);
                if(array1[i]['label'] == array2[x]['label']){
                array3.push({label:array1[i]['label'],value:array2[x]['value'],position:array1[i]['position']});

                }
        }        
    }
    console.log(array3);

Javascript how to join two arrays having same property value?

7 Answers7

Related