Compare two object of array using angular

Question

In my project i want to compare two object (images) of array and if the object value is same it should drop the object (images) and clear the previous one. but in my code if i drop the object all the previous objects are cleared.i just want to clear the same object only.

note: i need to implement this for captcha

file.ts:

origin = [{    
    img: 'https://www.gstatic.com/webp/gallery3/1.png'
  },
  {    
      img: 'https://www.gstatic.com/webp/gallery3/2.png'
  },
  {   
      img: 'https://www.gstatic.com/webp/gallery3/3.png'
  }];
  //---------------
  samp = [{  
    img: 'https://www.gstatic.com/webp/gallery3/1.png'
  },
  { 
    img: 'https://www.gstatic.com/webp/gallery3/2.png'
  },
  {  
    img: 'https://www.gstatic.com/webp/gallery3/3.png'
  }];
  //---------------
  destination = [
  ];
  //--------------- 
  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      let item:any = event.previousContainer.data[event.previousIndex];
      let copy:any = JSON.parse(JSON.stringify(item));
      let element:any = {};
      for(let attr in copy){
        if(attr == 'title'){
          element[attr] = copy[attr] += ' copy';
        }else{
          element[attr] = copy[attr];
        }
      }
      //compare and drag
      for (var i = 0, len = this.origin.length; i < len; i++) { 
        for (var j = 0, len2 = this.samp.length; j < len2; j++) { 
            if (this.origin[i].img === this.samp[j].img) {
             this.samp.splice(j,1);
             len2=this.samp.length;               
                this.destination=[element];
            }
        }
      }
    }
  }

file.html:

<div class="fields-container">
  <h2>Origin</h2>
  <div
    cdkDropList
    #originList="cdkDropList"
    [cdkDropListData]="origin"
    [cdkDropListConnectedTo]="[destinationList]"
    class="field-list">
    <div class="field-box" *ngFor="let item of origin" cdkDrag>
      <img src="{{item.img}}">
      <div *cdkDragPlaceholder></div>
    </div>
  </div>
</div>

<div class="fields-container">
  <h2>Copy</h2>
  <div
    cdkDropList
    #destinationList="cdkDropList"
    [cdkDropListData]="destination"
    class="field-list"
    (cdkDropListDropped)="drop($event)">
    <!--dragged image-->
    <div class="field-box" *ngFor="let item of destination" cdkDrag>
      <img src="{{item.img}}">
    </div>
    <!--dragged image-->
    <!--default image-->
    <div class="field-box-samp" *ngFor="let images of samp" cdkDrag>
      <img src="{{images.img}}">
    </div>
    <!--default image-->
  </div>
</div>

output:

You do not compare two objects using Angular. It is a framework and it uses TypeScript (a superset of JS). So you'd want to compare two array of objects. I think this link solves everything https://stackoverflow.com/questions/37065663/array-of-object-deep-comparison-with-lodash. I'd recommend not reiventing the wheel! :-) — Tomás Denis Reyes Sánchez, Mar 28 '20 at 12:55

score 1 · Answer 1 · answered Mar 28 '20 at 15:28

You can't compare two objects in Angular directly. Angular uses Superset of Javascript i.e. TypeScript.

One approach I can think of is stringify them and compare (i.e. simple conversion into json).

var stringifiedObject = JSON.stringify(sourceObject); // this code wrapped with json.parse can also be used to perform deep clone in JS

Once you have those two stringyfied objects that needs to compare, you can certainly perform comparison with === operator.

score 0 · Answer 2 · answered Mar 29 '20 at 08:05

0

you can check using

     if(JSON.stringify(origin) === JSON.stringify(samp)) {
         // object are same
       } else {
         // object are different
       }

answered Mar 29 '20 at 08:05

Suhag Lapani

655
10
18

score -1 · Answer 3 · edited Mar 28 '20 at 18:13

-1

You can use this example

import * as deepEqual from "deep-equal";

console.log(deepEqual({a:123},{a:123}));

edited Mar 28 '20 at 18:13

Cray

2,774
7
22
32

answered Mar 28 '20 at 14:57

Saravan Venkat

3
3

Compare two object of array using angular

3 Answers3