Search database-specific data in Ionic 3

Question

I would like to know how to filter and receive only the data I want on each page. my database.ts : `getAllProducts(){

return new Promise<Produto[]>((resolve, reject) => { 

  let sql = "select * from tb_produto";
  this.executeQuery(sql).then(data => {

    let products = [];
    data.forEach(function (row) {
      let product: Produto = { id_produto: row[0], nom_produto: row[1], val_produto: row[2] }
      products.push(product);
    });
    resolve(products);

  }).catch(error => {
    console.log(error);
  });

});`

And my HTML: <ion-card *ngFor="let produto of produtos"> <ion-card-content> <h6>Product ID: {{produto.id_produto}}</h6> <h6>Product Name: {{produto.nom_produto}}</h6> <h6>Product Price: {{produto.val_produto}} $</h6> </ion-card-content> </ion-card>

I want to show in each tab of the segment, only its content, but it is always showing all in all Gments. If anyone can help me, thank you very much.

Answer 1

It wasn’t clear what kind of Segments you have, but an alternative would be to filter after loading all products and creating a variable for each segment. Example below considering a segment for products with price > 100.

In your . ts

getAllProdutos().subscribe(produtos => {
   this.produtosSegment1 = produtos;
   this.produtosSegment2 = produtos.filter(x => return x.price > 100);
})

In your segment . html with price > 100

<ion-card *ngFor="let produto of produtosSegment2">
   <ion-card-content>
       <h6>Product ID: {{produto.id_produto}}</h6>
       <h6>Product Name: {{produto.nom_produto}}</h6>
       <h6>Product Price: {{produto.val_produto}} $</h6>
   </ion-card-content>
</ion-card>