Merge two arrays matching an id

Question

I have two arrays like

var members = [{docId: "1234", userId: 222}, {docId: "1235", userId: 333}];
var memberInfo = [{id: 222, name: "test1"}, {id: 333, name: "test2"}];

I need to merge this to a single array programatically matching the user ids

The final array should be like

var finalArray = [{docId: "1234", userId: 222, name: "test1"}, {docId: "1235", userId: 333, name: "test2"}]

Is there a cleaner way to do this, I have underscore library in my app, but I couldn't find a clean method to achieve this

score 8 · Accepted Answer · answered May 17 '15 at 12:36

8

A solution using underscore:

var finalArray = _.map(members, function(member){
    return _.extend(member, _.omit(_.findWhere(memberInfo, {id: member.userId}), 'id'));
});

_.map across the members
find the matching member info using _.findWhere
_.omit the id key from the matching member info
_.extend the member with the member info

answered May 17 '15 at 12:36

Gruff Bunny

27,738
10
72
59

Great example how to do it... I was searching for something like this... Tried so many different ways with underscore.... But this was exactly what I needed. Thanks Bunny :) – error505 Sep 14 '16 at 13:20

score 4 · Answer 2 · edited May 17 '15 at 12:47

4

You can achieve using foreach function and creating the third array and displaying it.

$scope.members = [{docId: "1234", userId: 222}, {docId: "1235", userId: 333}];
$scope.memberInfo = [{id: 222, name: "test1"}, {id: 333, name: "test2"}];
$scope.finalArray = [];

angular.forEach($scope.members, function(member) {
    angular.forEach($scope.memberInfo, function(memberInfo) {
      if(member.userId ==memberInfo.id) {
          var test = {
            docId : member.docId,
            userId: member.userId,
            name: memberInfo.name
          }
          $scope.finalArray.push(test);
      }
  });
});

Here is the working plunker:

http://embed.plnkr.co/QRB5v2cI6SZOdZgdqDVR/preview

Hope it helps!

edited May 17 '15 at 12:47

answered May 17 '15 at 11:54

Alhuck

1,029
8
11

Post code in your answer...not just a link to another site – charlietfl May 17 '15 at 11:55
I tried a lot of different ways to merge two arrays with matching ids and this solution nailed it! I even tried using angular.merge() which was good but the ids did not match when the objects merged. So this nested angular.forEach example was just what I needed. – Ian Poston Framer May 23 '17 at 18:26

score 1 · Answer 3 · answered May 17 '15 at 11:47

function computeMembers(members, memberInfo) {
  return members.map(function(member) {
    member.name = memberInfo[getMemberById(member.userId, memberInfo)].name
    return member
  })

  function getMemberById(id, elements) {
    var index = elements.filter(function(element) {
      return element.id === id
    })[0]
    return elements.indexOf(index)
  }
}

console.log(computeMembers(members, memberInfo))

Igor Semin · Answer 4 · 2015-05-17T12:14:00.773

var members = [{
    docId: "1234",
    userId: 222
}, {
    docId: "1235",
    userId: 333
}];
var memberInfo = [{
    id: 222,
    name: "test1"
}, {
    id: 333,
    name: "test2"
}];
var finalArray = [];

_.each(memberInfo, function (item) {
    finalArray.push(_.each(_.where(members, {
        userId: item.id
    }),

    function (element) {
        element.name = item.name
    }));
});

console.log(finalArray);

Fiddle example

score 0 · Answer 5 · answered Nov 23 '17 at 23:37

On ES6 you can use .find and Object.assign() in vanilla javascript, no need of extra libraries.

let finalArray = [];
memberInfo.forEach(member => {
finalArray.push( Object.assign( {}, member, 
         { docId: members.find(m => m.userId === member.id).docId } 
    ))
});

Thadeus Ajayi · Answer 6 · 2019-01-10T02:53:46.293

0

Do a nested map and update the top level element with the additional field date where fields in the arrays match.

member.map(mem => {
    return memberInfo.map(info => {
        if (info.id === mem.userId) {
            mem.date = info.date;
            return mem;
        }
    }
}

edited Jan 10 '19 at 02:53

answered Jan 08 '19 at 00:26

Thadeus Ajayi

993
10
16

1

Please explain how this solves the original question as it does not seem to do that – Simply Ged Jan 08 '19 at 05:04
I made a correction though, however what I did here was check where the fields matches which is the memberInfo id and the members userid, and add the additional field to the first array. The first array then contains and update of each item with the info in the second array. – Thadeus Ajayi Jan 08 '19 at 21:06
Thanks for update. But please use the `edit` button add any explanation to your answer so people in the future don't need to read through all of the comments to find an explanation :-) – Simply Ged Jan 08 '19 at 22:57

Merge two arrays matching an id

6 Answers6

Linked