如何在Ionic 2中对JSON数组中的唯一JSON对象进行排序

嘿，恭喜你已经搞定了从URL获取数据并存储到数组的第一步！接下来咱们一步步解决排序和折叠列表展示的问题～

首先咱们先处理数据排序的需求，假设你想按ws_type（项目类型）的字母顺序排序（如果要按地区ws_district排序，代码逻辑基本一致，替换字段就行）。可以直接用JavaScript的sort()方法，在你的组件里拿到数据后做如下处理：

// 假设你已经通过Http获取到了数据
this.http.get('你的API地址')
  .map(res => res.json())
  .subscribe(data => {
    // 先提取原始的result数组
    const originalData = data.result;
    
    // 按ws_type字母升序排序（转小写是为了避免大小写干扰排序）
    this.sortedData = originalData.sort((a, b) => {
      const typeA = a.ws_type.toLowerCase();
      const typeB = b.ws_type.toLowerCase();
      if (typeA < typeB) return -1;
      if (typeA > typeB) return 1;
      return 0;
    });

    // 如果你的数据里有完全重复的对象（比如ws_type和ws_district都一样），排序后可以顺便去重
    // this.uniqueSortedData = Array.from(new Set(this.sortedData.map(item => JSON.stringify(item))))
    //   .map(str => JSON.parse(str));
  });

接下来把排序好的数据放进折叠列表里，Ionic 2里可以通过自定义状态结合*ngIf来实现，下面给你两种常见的实现方式：

方式1：单个项目折叠 #

每个项目点击后展开详情：

HTML部分 #

<ion-list>
  <ion-item *ngFor="let item of sortedData" (click)="toggleItem(item)">
    <h2>{{item.ws_type}}</h2>
    <p>地区：{{item.ws_district}}</p>
    <ion-icon name="{{item.expanded ? 'arrow-down' : 'arrow-forward'}}" item-end></ion-icon>
    
    <!-- 展开的详情内容 -->
    <ion-item *ngIf="item.expanded" class="expanded-content">
      <p>这里可以放{{item.ws_type}}的详细描述、价格等信息</p>
    </ion-item>
  </ion-item>
</ion-list>

TypeScript部分 #

需要给每个数据项添加expanded属性来控制折叠状态：

// 在排序后给每个item添加expanded初始状态
this.sortedData = originalData.sort(/* 排序函数 */).map(item => ({
  ...item,
  expanded: false
}));

// 切换折叠状态的方法
toggleItem(item: any) {
  item.expanded = !item.expanded;
  
  // 可选：如果只想保持一个项目展开，关闭其他所有项
  this.sortedData.forEach(otherItem => {
    if (otherItem !== item) otherItem.expanded = false;
  });
}

方式2：按地区分组折叠 #

如果想把同一地区的项目放在一个折叠组里，先做分组处理：

TypeScript部分 #

// 按地区分组的工具函数
groupByDistrict(data: any[]) {
  return data.reduce((groups, item) => {
    const district = item.ws_district;
    if (!groups[district]) groups[district] = [];
    groups[district].push(item);
    return groups;
  }, {});
}

// 在获取数据后调用排序+分组
this.sortedData = originalData.sort(/* 排序函数 */);
this.groupedData = this.groupByDistrict(this.sortedData);
// 初始化展开状态
this.expandedGroups = {};

HTML部分 #

<ion-list>
  <ion-item *ngFor="let district of Object.keys(groupedData)" (click)="toggleGroup(district)">
    <h2>{{district}}</h2>
    <ion-icon name="{{expandedGroups[district] ? 'arrow-down' : 'arrow-forward'}}" item-end></ion-icon>
    
    <!-- 展开的分组项目列表 -->
    <ion-list *ngIf="expandedGroups[district]">
      <ion-item *ngFor="let item of groupedData[district]">
        <p>{{item.ws_type}}</p>
      </ion-item>
    </ion-list>
  </ion-item>
</ion-list>

TypeScript的切换方法 #

toggleGroup(district: string) {
  this.expandedGroups[district] = !this.expandedGroups[district];
}

• 可以给折叠内容加一点自定义样式，比如调整缩进或背景色，让层级更清晰；
• 如果用的是Ionic 2后期版本，也可以尝试ion-expansion-panel组件（需要确认版本兼容性）。

内容的提问来源于stack exchange，提问作者Harshal Deshmukh