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
– Keith, Commented Jul 11, 2018 at 11:02
yes I want to remove the label3 and just display 2 as the output — apelidoko
– apelidoko, Commented Jul 11, 2018 at 11:03
Possible duplicate of Getting a union of two arrays in JavaScript — Omar
– Omar, Commented Jul 11, 2018 at 11:04
Possible duplicate of stackoverflow.com/questions/51282996/… — Leonid Pyrlia
– Leonid Pyrlia, Commented Jul 11, 2018 at 11:06

Niladri Basu · Accepted Answer · 2018-07-12 02:48:45Z

3

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, 2018 at 2:48

answered Jul 11, 2018 at 11:02

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

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

4 Comments

CertainPerformance Over a year ago

This depends on array2 having all its labels matching in array1.

Niladri Basu Over a year ago

@CertainPerformance yes. OP can provide a default value in case the value not found. Eg arr.find() || {default object }

Keith Over a year ago

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.

apelidoko Over a year ago

thank you for your help, i didnt know such function exists

Nina Scholz · Accepted Answer · 2018-07-11 11:19:34Z

2

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; }

edited Jul 11, 2018 at 11:19

answered Jul 11, 2018 at 11:07

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

CertainPerformance · Accepted Answer · 2018-07-11 11:07:37Z

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);

Ullas Hunka · Accepted Answer · 2018-07-11 12:11:36Z

1

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);

edited Jul 11, 2018 at 12:11

Ullas Hunka

2,2111 gold badge18 silver badges31 bronze badges

answered Jul 11, 2018 at 11:08

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

4 Comments

Keith Over a year ago

In Chrome for me run snippet gets -> "Uncaught SyntaxError: Unexpected token {",

Arman Charan Over a year ago

Is this answer supposed to compile?

Nikhil Aggarwal Over a year ago

@Keith - It does now. A typo changed removed the , from array2.

Nikhil Aggarwal Over a year ago

@ArmanCharan - It does now. A typo changed removed the , from array2.

Arman Charan · Accepted Answer · 2018-07-11 11:11:32Z

0

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)

edited Jul 11, 2018 at 11:11

answered Jul 11, 2018 at 11:06

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

Comments

Vignesh Raja · Accepted Answer · 2018-07-11 11:15:09Z

0

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)

edited Jul 11, 2018 at 11:15

answered Jul 11, 2018 at 11:08

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

Comments

aasqw asdqwdqwd · Accepted Answer · 2018-07-11 11:24:32Z

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);

Collectives™ on Stack Overflow

Javascript how to join two arrays having same property value?

7 Answers 7

4 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related