How to compare one object value with other in angular 5

Question

I have written the code for getting the server sent events using EventSource, in which i have this below code. In the below code i have 2 objects one is tasksRes & other is tasks1.

Case 1: So among them i have to check one id with the other in both the objects. If the id matches with the first object then i have to over rite the first object id with the second object id in the template.

Case 2: If the id is not there in the object then i have to bind those id related json data in the first of the list.

tasks(){
    this.handler.activateLoader();
    this.tasksService.get(this.page, this.pageSize).subscribe(results => {
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }
        this.tasksRes = results['data'];
        this.length = results['totalElements'];
      }, error => {
        this.handler.hideLoader();
        this.handler.error(error);
      });
  }

//Get the push task data which updates automatically
  getPushData(){
    let source = new EventSource(this.url, { withCredentials: true });
      source.onopen = function(e){
        console.log('The connnection established..');
      };    
      source.addEventListener('message', (e) => {
        //let event = JSON.parse(message.data);
        let data[] = JSON.parse(e.data);
        let data1 = data[1];
        this.tasks1 = data1['data'];
        console.log(this.tasks1);
      });    
      source.addEventListener('welcome', (e) => {
        console.log('welcome event data:', e.data);
      });    
      source.onerror = function(e){
        console.log('EventSource failed.');
      };
    }

The template code:

<ul class="p-0" *ngFor="let task of tasksRes">
    <li class="pl-2 pr-2 text-dark send-msg mb-1">
        <p>
            <a href="javascript:;" [routerLink]="[task.link]">
                {{ task.name } }
            </a> -
            <span class="text-muted">{{task.eventType}}</span>
            <br/>
            <small class="text-muted">{{task.createdDate | timeAgo}} &nbsp;&nbsp;|&nbsp;&nbsp; {{task.status}}
            </small>
        </p>
    </li>
</ul>

This is the json data i get from tasksRes.

{
    createdBy:null,
    createdDate:"2018-08-20T14:04:27.802+0000",
    entityId:"8a8082fb6542fa5f0165475f7d3d2205",
    entityType:"Project",
    eventType:"Sync",
    id:"8a80822c6551bd59016557a6b51a722a",
    inactive:false,
    link:"/app/projects/8a8082fb6542fa5f0165475f7d3d2205/test-suites",
    modifiedBy:null,
    modifiedDate:"2018-08-20T14:04:27.802+0000",
    name:"chat window",
    status: "Done"
}

This is the json data i get from the tasks1 object

{
    "id": "8a80822c6551bd59016557a60746708e",
    "createdBy": null,
    "createdDate": 1534773823302,
    "modifiedBy": null,
    "modifiedDate": 1534773823302,
    "version": null,
    "inactive": false,
    "eventType": "Sync",
    "entityType": "Project",
    "status": "In_progress",
    "entityId": "8a8082f664a949ca0164abae16575b6d",
    "name": "Testing ww",
    "taskId": "5sJl84TOR2umd3eZ",
    "link": "/app/projects/8a8082f664a949ca0164abae16575b6d/test-suites",
    "user": null,
    "org": {
        "id": "8a8082e164a7aa410164a7e19bf201f3",
        "createdBy": null,
        "createdDate": null,
        "modifiedBy": null,
        "modifiedDate": null,
        "version": null,
        "inactive": false,
        "name": "Labs_UI"
    }
}

So i want to compare these 2 objects with their id's and if its found then need to modify with the tasks1 with the taskRes. So how to achieve this? Any ideas?

Answer 1

Underscore offers extend(), which does what I think you want...

let tasks1 = // some object
let taskRes = // some object

if (task1.id == taskRes.id) _.extend(tasks1, taskRes)  // update tasks1 with the values from matching keys in taskRes