How to join array objects with lodash

Question

I have two variables with two different array objects. One is the collection(this.collection) object and the second is the user(this.user) object.

I want to join this two objects into one by the UID. Here is the collection object :

   {  
       "id":"d67de5QJ",
       "admins":[  
          "494949393"
       ],
       "color":"#029ae4",
       "components":{  
          "forums":false,
          "pages":true,
          "photos":false,
          "videos":false
       },
       "createdAt":"2018-02-09 14:38:59",
       "description":"Angular is a TypeS",
       "homepage":"pages",
       "photoURL":"https://firebase..",
       "status":"Public",
       "title":"Angular 5",
       "uid":"hlyAbEUfJhbxy",
       "updatedAt":"2018-02-09 14:38:59"
    }

And here is the user object

{
  "bio": "<strong>PROFILE NEEDS EDITING",
  "contactInfo": {
    ...
  },
  "createdAt": "2018-02-09 12:43:47",
 ,
  "email": "email@gmail.com",
  "avatar": "https://lh5.googleusercontent.com/-3LjYEmTIZlo/A...",
  "roles": {
    "admin": false,
    "dealer": false,
    "user": true
  },
  "status": "online",
  "uid": "hlyAbEUfJhbxy",
  "updatedAt": "2018-02-09 14:37:23",
}

How can I achieve this with LoDash or vanilla JavaScript? As you can see, there are other common properties like updatedAt and createdAd .

I tried this but I get an empty object

if(this.collection) {
          this._auth.getUser(this.collection.uid).subscribe((user) => {
            this.user = user;
            const col = unionBy(this.user, this.collection, this.collection.uid)
             console.log(col)
          });

Answer 1

Object.assign() would work for this. Here you can find detail explanation.

See fiddle here

var col =   {  
       "id":"d67de5QJ",
       "admins":[  
          "494949393"
       ],
       "color":"#029ae4",
       "components":{  
          "forums":false,
          "pages":true,
          "photos":false,
          "videos":false
       },
       "createdAt":"2018-02-09 14:38:59",
       "description":"Angular is a TypeS",
       "homepage":"pages",
       "photoURL":"https://firebase..",
       "status":"Public",
       "title":"Angular 5",
       "uid":"hlyAbEUfJhbxy",
       "updatedAt":"2018-02-09 14:38:59"
    }

 var user = {
  "bio": "<strong>PROFILE NEEDS EDITING",
  "createdAt": "2018-02-09 12:43:47",

  "email": "email@gmail.com",
  "avatar": "https://lh5.googleusercontent.com/-3LjYEmTIZlo/A...",
  "roles": {
    "admin": false,
    "dealer": false,
    "user": true
  },
  "status": "online",
  "uid": "hlyAbEUfJhbxy",
  "updatedAt": "2018-02-09 14:37:23",
}

console.log(Object.assign(col,user))

Answer 2

You can use loadash merge : _.merge . unlike Object.assign , _.merge even handles nested objects. Find the documentation and example here .