Search code examples
javascriptarraysarray-map

Javascript how to join two arrays having same property value?


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

Solution

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