Angular 10:how to compare two arrays

Question

I have two arrays, one with colors, and one with categories.

 "colors": [ { "buttonId": "color-cinder-spark-red", "filmCategory": 1, "name": "cinder spark red", "previewImg": "assets/filmPreviewImg/gloss-cinder-spark-red.png", "default": true }, { "buttonId": "color-gloss-red-metallic", "filmCategory": 2, "name": "red metallic", "previewImg": "assets/filmPreviewImg/gloss-red-metallic.png" }, { "buttonId": "color-dragon-red", "filmCategory": 3, "name": "dragon red", "previewImg": "assets/filmPreviewImg/gloss-dragon-red.png" },...

The array is very large.

Here is categories:

 "types": [ { "id": 1, "name": "Gloss", "type": "gloss" }, { "id": 2, "name": "Matte", "type": "matte", "default": true }, { "id": 3, "name": "Satin", "type": "satin" },...

In an array of colors, the category is displayed as id. I need to compare the id of the selected color with the category, and then get the name of the category. Here I will get the category id of the selected color

  filmTypes = filmTypes.types;
  filmColors = filmColors.colors;

  currentColor: any;
 
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService,
              private _productService: ProductService) {}

  ngOnInit(): void {
    const defaultColor = this.filmColors.find((c) => c.default);
    this.selectColor(defaultColor);  
       
    this._productService.currentFilmColor$.subscribe((color: any) => {      
      this.currentColor = color.filmCategory;          
      console.log('color2',this.currentColor);            
    });    
  }

How can I compare this id in another array and get the category name?

Answer 1

Use Array#find .

const { name } = filmTypes.find(({ id }) => id === this.currentColor);