set array object from other array object

Question

I have 2 arrays array1, array2.

array 1 objects: userName, userId
array 2 objects: userId, msg
i want to get array3: userId, userName, msg

Array1:

[{ userName: 'vimal', userId: 789 },
    { userName: 'kabilan', userId: 456 },
    { userName: 'yathavan', userId: 123 }]

Array2:

[ { userId: '123', msg: 'hi' },
{ userId: '789', msg: 'yth' },
{ userId: '789', msg: 'hu' } ]

i want to compare 2 arrays and get output like this. Array3:

[ { userId: '123', userName: 'yathavan', msg: 'hi' },
{ userId: '789', userName: 'vimal', msg: 'yth' },
{ userId: '789', userName: 'vimal', msg: 'hu' } ]

possible duplicate of How can I merge properties of two JavaScript objects dynamically? — Ben Fortune
– Ben Fortune, Commented Apr 23, 2015 at 20:47

bloodyKnuckles · Accepted Answer · 2015-04-23 23:31:08Z

An off-the-shelf, "functional programming" approach:

var users = [{ userName: 'vimal', userId: 789 },
    { userName: 'kabilan', userId: 456 },
    { userName: 'yathavan', userId: 123 }]

var messages = [ { userId: '123', msg: 'hi' },
    { userId: '789', msg: 'yth' },
    { userId: '789', msg: 'hu' } ]

var user_message_list = [];
messages.map(function (message) {
    return users.
        filter(function (user) {
            return user.userId == message.userId
        }).
        map(function (user) {
            return {
                "userId": user.userId,
                "userName": user.userName,
                "msg": message.msg
            }
        })
})
.forEach(function (item) { // eliminate nested layers 
    user_message_list.push.apply(user_message_list, item)
})

JSFiddle Functional

Explanation:

Two arrays of objects, one a list of users, and the other a list of messages by some of those users.

You're wanting to flesh out a report of the messages showing the usernames, so start with the messages array and loop through it. Now, for each message loop through the users list and retrieve the corresponding username.

The "loopy" approach is like this:

var messages_users = []
var message_user = {}
for (ii=0; ii < messages.length; ii++) {
    message_user = {
        "userId": messages[ii].userId,
        "msg": messages[ii].msg
    }
    for (iii=0; iii < users.length; iii++) {
        if ( messages[ii].userId == users[iii].userId ) {
            message_user.userName = users[iii].userName
        }
    }
    messages_users.push(message_user)
}

JSFiddle Loopy

Alternatively, using Functional Programming concepts, start by maping a function to each item in the messages array. That function takes the users array and filters it to find the corresponding user object for the current message, and map on that result to combine the current message information with the filtered user result. At this point you have an object wrapped in an array, since the map and filter methods return arrays. Therefore, the final operation is to loop using the forEach method to remove the extra array layer. Some JavaScript libraries have a concatAll or better yet concatMap method that hides that extra loop. In that case you'd have something like this:

var user_message_list = messages.
    concatMap(function (message) {
        return users.
            filter(function (user) {
                return user.userId == message.userId
            }).
            map(function (user) {
                return {
                    "userId": user.userId,
                    "userName": user.userName,
                    "msg": message.msg
                }
            })
})

The benefit here is tighter coupling between the language nomenclature and the procedural concepts. For example: filter(... vs. for (i=0; ... if ( arr[i] ===.... Both constructs loop and select items based on criteria, hence filter.

More on Functional Programming in JavaScript

Charlie Wynn · Accepted Answer · 2015-04-23 21:05:24Z

1

I'd make a users array indexed my the userid that contains the username;

var users = [];

for(var i=0; i<arr1.length; i++)
  users[arr1[i].userId] = arr1[i].userName;

now make your output array, and go through the 2nd array. using the users array to insert;

var arr3 = [];

for(var i=0; i<arr2.length; i++)
  arr3.push({userId:arr2[i].userId, userName:users[arr2[i].userId], msg:arr2[i].msg});

answered Apr 23, 2015 at 21:05

Charlie Wynn

9331 gold badge8 silver badges23 bronze badges

Comments

StackSlave · Accepted Answer · 2015-04-23 21:28:01Z

1

You would do something like this, if userId value was not a String in ary2:

var ary1 =[{userName:'vimal', userId:789}, {userName:'kabilan', userId:456}, {userName:'yathavan', userId:123}];
var ary2 = [{userId:123, msg:'hi'}, {userId:789, msg:'yth'}, {userId:789, msg:'hu'}];
function specialMerge(ar1, ar2){
  var r = [];
  for(var i=0,l=ar1.length; i<l; i++){
    var p = ar1[i];
    for(var n=0,c=ar2.length; n<c; n++){
      var m = ar2[n];
      if(p.userId === m.userId){
        r.push({userId:p.userId, userName:p.userName, msg:m.msg});
      }
    }
  }
  return r;
}
var resultArrayOfObjects = specialMerge(ary1, ary2);

answered Apr 23, 2015 at 21:28

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

set array object from other array object

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related