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!

Yes, of course. But, even that, the new array will be filled each time when the user change the product from the list or check and after deselect one of the check box... — Sebastian, Jan 15 '19 at 08:41
@Sebastian Why do you want an array if you only have one selected product with `productSelected` ?! — Florian, Jan 15 '19 at 09:02
because in that array I will hold that product selected plus accessories selected. Also, in that way I can populate the table. with *ngFor. and add a index for each row. — Sebastian, Jan 15 '19 at 09:09
@Sebastian If you only have one product selected, you create a variable `selectedProduct` and another variable which is an array : `selectedAccessories` — Florian, Jan 15 '19 at 09:11
Nice, it is a good approach but I have in my case three lists and four check boxes. — Sebastian, Jan 15 '19 at 09:18
I don't fully understand your question but take a look this example: https://stackblitz.com/edit/angular-xq3mgv If you want to remove existing records you can do it by using `splice` and `indexOf`: https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript — Lyczos, Jan 15 '19 at 09:33

Komal Bansal · Answer 1 · 2019-01-15T09:32:55.567

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);
    }
    }

edited Jan 15 '19 at 09:32

answered Jan 15 '19 at 08:51

Komal Bansal

669
5
19

Yes, this is ok with check boxes but not for the list. In the list I will have a lot of products and the user may change his mind to select another product from the list. And in this way I cannot use that method. – Sebastian Jan 15 '19 at 08:57
Can you please describe your problem in details.The user can only select one product ? – Komal Bansal Jan 15 '19 at 09:00
Yes, he will use a list of products and other check boxes for accessories. I want to be a dynamically table populated each time when user will select a product or select / deselect for an accessory. I could to create a button to populate the table at the end of selections but I want to be dynamically.. – Sebastian Jan 15 '19 at 09:05
//with this method I will also add this accessory in the array KB R accessory – Sebastian Jan 15 '19 at 09:23
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186702/discussion-between-komal-bansal-and-sebastian). – Komal Bansal Jan 15 '19 at 10:04

score 0 · Answer 2 · answered Jan 15 '19 at 09:13

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>

score 0 · Answer 3 · answered Jan 15 '19 at 09:19

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);

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

3 Answers3