Combining two arrays based on a common id

Question

Combining two arrays based on a common id

Here are two arrays:

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

I want to merge them into a single array by matching user ids programmatically.

The combined array should look like this:

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

I am looking for a more efficient way to do this. I have the underscore library in my application but couldn't find a clean method to achieve this.

javascript angularjs underscore.js

Answer 1

Answer №1

A method utilizing underscore:

var updatedArray = _.map(members, function(person){
    return _.extend(person, _.omit(_.findWhere(personalInfo, {id: person.userId}), 'id'));
});

_.map iterating over the members
locating the corresponding personal information using _.findWhere
_.omit removing the id key from the found personal info
_.extend merging the member with their personal info

Answer 2

A method utilizing underscore:

var updatedArray = _.map(members, function(person){
    return _.extend(person, _.omit(_.findWhere(personalInfo, {id: person.userId}), 'id'));
});

_.map iterating over the members
locating the corresponding personal information using _.findWhere
_.omit removing the id key from the found personal info
_.extend merging the member with their personal info

Answer 3

Answer №2

To accomplish this task, you can utilize the foreach function along with creating a third array to display the desired information.

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

For a live example, check out this plunker:

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

I hope this solution is helpful!

Answer 4

To accomplish this task, you can utilize the foreach function along with creating a third array to display the desired information.

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

For a live example, check out this plunker:

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

I hope this solution is helpful!

Answer 5

Answer №3

function updateMemberNames(members, memberInfo) {
  return members.map(function(member) {
    member.name = memberInfo[findMemberById(member.id, memberInfo)].name
    return member
  })

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

console.log(updateMemberNames(members, memberInfo))

Answer 6

function updateMemberNames(members, memberInfo) {
  return members.map(function(member) {
    member.name = memberInfo[findMemberById(member.id, memberInfo)].name
    return member
  })

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

console.log(updateMemberNames(members, memberInfo))

Answer 7

Answer №4

const teamMembers = [{
    docId: "1234",
    userId: 222
}, {
    docId: "1235",
    userId: 333
}];
const memberInfoDetail = [{
    id: 222,
    name: "John Doe"
}, {
    id: 333,
    name: "Jane Smith"
}];
const finalMemberArray = [];

_.each(memberInfoDetail, function (person) {
    finalMemberArray.push(_.each(_.where(teamMembers, {
        userId: person.id
    }),

    function (member) {
        member.name = person.name
    }));
});

console.log(finalMemberArray);

Check out the Fiddle example here

Answer 8

const teamMembers = [{
    docId: "1234",
    userId: 222
}, {
    docId: "1235",
    userId: 333
}];
const memberInfoDetail = [{
    id: 222,
    name: "John Doe"
}, {
    id: 333,
    name: "Jane Smith"
}];
const finalMemberArray = [];

_.each(memberInfoDetail, function (person) {
    finalMemberArray.push(_.each(_.where(teamMembers, {
        userId: person.id
    }),

    function (member) {
        member.name = person.name
    }));
});

console.log(finalMemberArray);

Check out the Fiddle example here

Answer 9

Answer №5

With ES6, you can utilize the .find method along with Object.assign() within vanilla JavaScript without relying on any additional libraries.

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

Answer 10

With ES6, you can utilize the .find method along with Object.assign() within vanilla JavaScript without relying on any additional libraries.

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

Answer 11

Answer №6

Perform a nested mapping operation and add a new field called date to the main element when matching fields are found in the arrays.

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

Answer 12

Perform a nested mapping operation and add a new field called date to the main element when matching fields are found in the arrays.

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

Combining two arrays based on a common id

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating a Search Functionality within a Tab Component in Ionic

Exploring paths deep within by employing wildcards as a query

Guide on submitting a form via Ajax on a mobile app

What is causing the issue with useForm not being identified as a function?

HTML login form featuring a transparent design with a username textfield already populated with a cookie

Strategies for resolving type issues in NextJs with Typescript

Import Socket.io into your Node.js application using the import statement

The functionality of "Body Onload" for sending "ScrollHeight" is malfunctioning in Chrome and Safari

Can you effectively link together AngularJS promises originating from various controllers or locations?

Unlimited Angular Digest Loop Caused by promise.then()

I am interested in retrieving all users along with the places they have created using virtual population

Transforming a callback function into a Promise: A step-by-step guide

Express.js post request not functioning properly

Unable to find the element using the text "selenium webdriver"

perform the directive function following the ng-cloak execution

Is the JavaScript file not being stored in the cache?

Conceal the Initial Data Point in a Series on HighCharts

Navigating through Angular JS validation procedures step by step

Navigating a table while keeping headers in place at the top

Turn off the scrolling bars and only allow scrolling using the mouse wheel or touch scrolling