Angular2 comparing two arrays and objects and removing any that exist in both -

i writing application allows user add categories product. pulling every category though exists api , categories allocated product. want compare 2 arrays of objects , if category in allocated categories product don't want display option product allocated cannot add product category allocated to.

here example of api data:

allocated categories product:

{id: "3", name: "vitamins , minerals ", description: "", created_at: "2016-08-15 09:21:05",…} 

all categories on application:

0: {id: "1", name: "detergents , disinfectants", description: "", created_at: "2016-08-15 09:21:05",…} 1 : {id: "2", name: "poultry equipment", description: "", created_at: "2016-08-15 09:21:05",…} 2 : {id: "3", name: "vitamins , minerals ", description: "", created_at: "2016-08-15 09:21:05",…} 3 : {id: "4", name: "gut health ", description: "", created_at: "2016-08-15 09:21:05",…} 4 : {id: "5", name: "rodent, mite , fly control", description: "", created_at: "2016-08-15 09:21:05",…} 5 : {id: "6", name: "protective clothing", description: "", created_at: "2016-08-15 09:21:05",…} 

now, can see, allocated category needs removed categories display array not option product. cannot seem taken out of array. have tried on view:

<a *ngif='allocatedcategories.indexof(category) === -1'>{{category.name}}<i class='glyphicon glyphicon-plus'></i></a> 

but doesn't work , on controller:

alreadyallocated(category) {         for(var = 0; < this.allocatedcategories; i++) {             if(this.allocatedcategories[i]['id'] == category.id) {                 return false;             }         }         return true;     } 

here whole component controller if helps:

import { component, input } "@angular/core"; import { product } "../../../../classes/product"; import { productservice } "../../../../services/product.service"; import { subscription } "rxjs"; import { activatedroute } "@angular/router"; import { location } '@angular/common'; import { tabsservice } "../../../../services/tabs.service"; import { categoryservice } "../../../../services/category.service";  @component({     selector: 'product-edit',     templateurl: '/app/views/catalog/products/directives/product-edit.html',     moduleid: module.id })  export class producteditcomponent {     public product:product;     private categories = {};     private allocatedcategories = [];     private searchterm = '';     private _subscription: subscription;     public id: number;     public tabs:array<any> = [         {title: 'general', content: '', active: true, linked: 'general'},         {title: 'images', content: '', active: false, linked: 'images'},         {title: 'categories', content: '', active: false, linked: 'categories'},         {title: 'manufacturers', content: '', active: false, linked: 'manufacturers'}     ];     private selectedtab: object = this.tabs[0];          constructor(         private _productservice: productservice,         private _categoryservice: categoryservice,         private _activatedroute: activatedroute,         private _location: location,         private _tabsservice: tabsservice     ) {         this._tabsservice.emitter             .subscribe((tab) => {                 this.tabs.filter((arrayitem) => {                     if(arrayitem.title === tab.title) {                         this.selectedtab = arrayitem;                     }                 });             }, () => {              }, () => {              });      }      getproduct() {         var self = this;         this._productservice.getproduct(this.id)             .subscribe(                 (product) => {                     self.product = product[0];                 }             );     }      getcategories(filters) {         var self = this;         this._categoryservice.getcategories(filters)             .subscribe((categories) => {                 self.categories = categories;             });      }      getallocatedcategories() {         var self = this;         this._categoryservice.getcategories({             product: self.id         }).subscribe((categories) => {             self.allocatedcategories = categories;         });     }      searchcategories() {         var self = this;         this.getcategories({             'search_term' : self.searchterm         });     }      alreadyallocated(category) {         for(var = 0; < this.allocatedcategories; i++) {             if(this.allocatedcategories[i]['id'] == category.id) {                 return false;             }         }         return true;     }      back() {         this._location.back();     }      ngoninit() {         var self = this;         this._subscription = this._activatedroute.params.subscribe(params => {             self.id = +params['id'];             this.getproduct();         });         this.getcategories({});         this.getallocatedcategories();     }      ngondestroy() {         this._subscription.unsubscribe();     } } 

can see why not working?

thanks

what having method remove duplicated categories array?

private removeduplicatedcategories(prodcategories: any[], toberemoved: any[]) {     let i: number = 0;     while (i < prodcategories.length) {         (let torem of toberemoved) {             if (torem.id === prodcategories[i].id) {                 prodcategories.splice(i, 1); // remove duplicated                 continue;             }         }         ++i;     } } 

the method above modify original array. instead, if want preserve original categories array, can have method returning array non-duplicated categories:

private removeduplicatedcategories(prodcategories: any[], toberemoved: any[]): any[] {     let ret: any[] = []; // new array returned     (let pc of prodcategories) {         let isdup: boolean = false;         (let torem of toberemoved) {             if (pc.id === torem.id) {                 isdup = true;                 break;             }         }         if (!isdup) ret.push(pc); // append non-duplicated     }     return ret; }