How to select an array of objects from inside an array of objects and create another array with it?

Question

I have an array of 3586 objects. The index 0 is SAPATILHA / SHARP BEGE/TABACO and has an array called products that contains 10 items. Could someone explain to me how I can create and save an array containing the products of the selected index?

console.log

listarPorReferencia() {
    this.linxService.listarPorReferencia().subscribe(data => {      
      this.aux3 = data;           
      this.aux3.forEach(element => {        
        this.novasColecoes.push({        // novasColecoes is the array with 3586 objects
          "produtos": element.produtos,
          "nome": element.nome,          
          "referencia": element.referencia,
          "selecionado": false          
        });        
      })
      this.colecoes = this.novasColecoes      
      this.arrayProdutos.forEach(element => {
        if (this.novasColecoes.find(m => m.idProduto == element.LinxProdutosId)) {
          this.novasColecoes.find(m => m.idProduto == element.LinxProdutosId).selecionado = true;          
        }        
      });      
    });
  } 

 //The code above is taking the array from the backend
 // The below code I try to select products inside the main array
  setProduct(product) {
    
    product.forEach(getProducts => {
          if(idProducts.includes(getProducts.id)){
          this.idProducts = this.idProducts.filter(c => c != getProducts.id);
          this.arrayProdutos = this.arrayProdutos.filter(c=>c!=getProducts);
      }else{        
        this.idProducts.push(getProducts.id);
        this.arrayProdutos.push(getProducts);
      }      
    })     
  }

Answer 1

I imagine you're using material table with selection (the example of "Table with selection" in the docs of angular), so you can access to the element in "selection.selected"

doSomething()
{
  this.selection.selected.forEach(x=>{
    console.log(x)
  })
}

see stackblitz

If you are not using material table, I suppose you has a table more or less like

<tr *ngFor="let item of novasColecoes|slice:0:(page+1)*20">
   <td><input type="checkbox" [(ngModel)]="item.selecionado"></td>
   <td>{{item.referencia}}</td>
   <td>{{item.nome}}</td>
   ...
<tr>

See that you use [(ngModel)] to binding the property "selecionado" or each element of the array.

NovasColecoe has an array produtos althought we don't use in the table.

To select the novasColecoes selecionado you only need filter

submit()
{
    let products:any[]=[]
    this.novasColecoes.filter(x=>x.selecionado).forEach(x=>{
       //here concat the two arrays. you can do
       products.push(...x.produtos)

      //or
      products=product.concat(x.produtos) 
    })
    //here you has all the products
}

NOTE: If you want to "merge" two arrays without repeat see,e.g. this another SO