按离子 3 中的数据分组列表

Question

我有table

id   customer_name  country  pincode

1    Jhon             Mexico  12209 

2    Ryan             Mexico  12209 

3    Max              Sweden  12209 

4    Steve            Germany  12209

我想要这样的输出：

Mexico  
        Jhon, Ryan

Sweden 
         Max

Germany 

         Steve

Home.ts

show(){
    db.executeSql('SELECT *  from  tbl_data where coutry=?',[data.rows.item(i).country])

            .then((data) => {
              if (data.rows.length > 0) {
                alert(data.rows.length);
                for (let j = 0; j < data.rows.length; j++) {
                  this.userdata.push({
                  country:data.rows.item(j).country,
                   customername:data.rows.item(j).customername,
                 })
                 }}}

如何在 ionic v3 中按这样的数据分组

如何使用 Ionic v3 实现这一点？有什么想法吗？

Answer 1

您可以通过 group by 查询来实现。

SQL :

SELECT country, customer_name 
FROM tbl_data 
GROUP BY country, customer_name

所以完整的代码将是：

 db.executeSql('SELECT country, customer_name FROM tbl_data GROUP BY country, customer_name'[]).then((data) => { })

Answer 2

据我了解，您正在尝试按国家/地区对其进行分组，以便您可以在 TS、

中实施以下内容

var country = new Set(this.displayItems.map(item => item.country)); 
this.result = [];
country.forEach(getCountry => 
  this.result.push({
    country_name: getCountry, 
    values: this.displayItems.filter(i => i.country === getCountry)
  }
  ))

此处 this.displayItems 是您的服务数据。

和HTML模板可以像，

<ion-grid>
  <ion-row>
    <ion-col>
      Country
    </ion-col>
    <ion-col>
      Customer Name
    </ion-col>
  </ion-row>
  <hr>

  <ion-row *ngFor="let item of result">
    <ion-col>
      {{ item.country_name }}
    </ion-col>
    <ion-col>
      <span *ngFor="let value of item.values">
        {{ value.customer_name }} ,
      </span>
    </ion-col>
  </ion-row>

</ion-grid>

你可以在这里以 Ionic 方式看到你的预期输出，https://stackblitz.com/edit/ionic-25rq2n ..

按离子 3 中的数据分组列表

group list by data in ionic 3

javascript

ionic-framework

ionic3

angular