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

我有一张桌子

id   customer_name  country  pincode

1    Jhon             Mexico  12209 

2    Ryan             Mexico  12209 

3    Max              Sweden  12209 

4    Steve            Germany  12209 

我想要这样的输出：

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

show（）{
db.executeSql（'SELECT*from tbl_data，其中coutry=？'，[data.rows.item（i）.country]）
。然后（（数据）=>{
如果（data.rows.length>0）{
警报（data.rows.length）；
for（设j=0；j

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

---

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

您可以通过

分组查询来实现这一点

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) => { })

据我所知，您正试图按国家对其进行分组，以便您可以在
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>


国家
客户名称

{{item.country_name}
{{value.customer_name}，

您可以在这里以爱奥尼亚式的方式看到您的预期输出，…
从何处获取此数据？并共享您迄今为止尝试过的一些代码。使用sqllite querydb.executeSql（'SELECT*From tbl_data where country=？'，[data.rows.item（i）.country]）共享您的查询和代码，以便我们知道您打算做什么？编辑问题并共享一些代码。添加了…………您尝试执行的查询未将指定的表达式“Customer_name”作为聚合函数的一部分。已编辑，请立即尝试。如何按给定方式打印这些数据output@prabhakaran7，dat您正在讨论的a是作为服务创建的，它返回可观察的，订阅时将获取数据。根据数据，我们正在搜索唯一的国家名称，然后根据它，我们将数据推送到
结果
数组中。因此，结果是需要可编辑的最终输出。根据国家名称这里的值可以是iterable，客户名称可以根据国家显示。如果你想了解整个情况，那么你需要学习Javascript方法，如Set、Map、Filter。如果你了解这些方法，那么只有你才能知道它是如何工作的。因此，如果你在Angular工作，就要学习Javascript/Ionic..values:this.displayItems.filter（i=>i.country===getCountry）我在这里是什么？这一行发生了什么explain@prabhakaran7，正如我所说的。displayItems是来自API服务的数据数组，您将对其进行过滤，过滤器将返回数组中的每个对象，每个对象由
i
表示，因此这里是
i.country
将给出数组中的所有国家/地区名称，已经使用了
新设置
我们已经获取了唯一国家/地区的名称，因此此行的目的是将唯一国家/地区名称与过滤后的国家/地区名称相匹配，如果找到匹配项，则让我们将其他值推送到
值中：
在
结果
数组中…您使用的名称我在解决方案中使用的代码可能相同，也可能不同，因为您的端没有足够的代码，我这样做了..您需要检查名称。。
<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>