How to populate an array of objects from a select list and check boxes and use this array into a table

Question

I want to create an array of objects and use this array into a table. The array will receive data from a list and some check boxes. The main problem is that if the user will select another product from a list the table will just add the new product from that array but the old product will remain in the table.

products = [
{code: '123', name: 'product1'},
{code: '321', name: 'product2}'
]

<select formControlName="modelPDC" (click)="selectProduct()">
      <option *ngFor="let prod of this.products" 
      [value]="prod.code">{{ prod.name }}</option>
</select>

<tr>
        <td>{{ productSelected.name }}</td>
        <td>{{  productSelected.code  }}</td>
</tr>

//I will use *ngFor to populate the table.
//The productSelected will be the array filled with the data selected in 
//the list and others check boxes.

I know how to fill the array, I will use the .push method but I don't know how to avoid duplicates field in the table (array -> productSelected). I was thinking to search into the array and if the product was selected just to remove it, or something like that.

I hope I war clearly enough.. Thank you!

Answer 1

check is checkbox value of your product if checkbox value is true, and product does not exist in selected products then push it else if check is false and the product is present in selected product list you can remove it using splice

  setToArray(prod, check){
      if(!check && selectedProd.includes(prod)) {
         selectedProd.splice(selectedProd.indexOf(prod),1)
       }
      else if(check && !selectedProd.includes(prod)){
       selectedProd.push(prod);
    }
    }

Answer 2

Try this example

**In Ts file**

import { Component } from '@angular/core';

export interface Food {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];
  selectedItems: any = [];

  getArray() {
    let tempArray = [];
    for (let i = 0; i < this.foods.length; i++) {
      if (this.selectedItems.indexOf(this.foods[i].value) == -1) {
        tempArray.push(this.foods[i]);
      }
    }
    return tempArray;
  }

  selectionPush(data) {
    if (this.selectedItems.indexOf(data.value) == -1) {
      this.selectedItems.push(data.value);
    }
  }
  remove(data) {
     let tempArray = [];
    for (let i = 0; i < this.selectedItems.length; i++) {
      if (this.selectedItems[i] != data) {
        tempArray.push(this.selectedItems[i]);
      }
    }
    this.selectedItems = tempArray;
  }
}

In Html file

<mat-form-field>
  <mat-select placeholder="Favorite food" (selectionChange)="selectionPush($event)">
    <mat-option *ngFor="let food of getArray()" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br/>
<mat-checkbox [checked]="true" (change)="remove(items)" *ngFor="let items of selectedItems">{{items}}</mat-checkbox>

Answer 3

I'm not certain under what conditions you want to remove an "old" row from the table, but if you give each row an id (or a class unique to that row) when it's created, then whenever those conditions occur, you could do something like:

let yuckyRow = document.querySelector("#rowId");
document.querySelector("#myTable").removeChild(yuckyRow);