在Ionic3中如何过滤JSON？实现金额大于输入值的客户列表筛选

嘿，这个需求在Ionic3里实现起来挺简单的，我给你拆解成具体步骤，连代码示例都备好，顺便讲清楚JSON过滤的核心逻辑~

1. 核心思路梳理 #

我们要做的就是：用户输入金额 → 实时过滤原始客户列表 → 只展示金额大于输入值的客户。核心就是利用JavaScript数组的过滤方法，配合Angular的数据绑定来实现实时更新。

2. 组件逻辑实现（TypeScript部分） #

首先在你的客户列表组件里定义好原始数据、输入绑定变量，还有过滤后的数组，再写一个筛选方法：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss'],
})
export class CustomerListComponent implements OnInit {
  // 模拟的原始客户数据（实际可从后端接口获取）
  private customers = [
    { id: 1, name: '张三', amount: 120 },
    { id: 2, name: '李四', amount: 280 },
    { id: 3, name: '王五', amount: 75 },
    { id: 4, name: '赵六', amount: 350 },
    { id: 5, name: '孙七', amount: 190 }
  ];
  
  // 绑定用户输入的金额
  filterAmount: number;
  // 存储过滤后的客户数据
  filteredCustomers: any[];

  constructor() { }

  ngOnInit() {
    // 初始化时显示全部客户
    this.filteredCustomers = [...this.customers];
  }

  // 实时筛选方法
  filterCustomers() {
    // 处理输入为空或非正数的情况，直接返回全部数据
    if (!this.filterAmount || this.filterAmount <= 0) {
      this.filteredCustomers = [...this.customers];
      return;
    }

    // 核心过滤逻辑：用Array.filter()筛选金额大于输入值的客户
    this.filteredCustomers = this.customers.filter(customer => {
      return customer.amount > this.filterAmount;
    });
  }
}

3. 模板视图实现（HTML部分） #

然后在模板里做输入框和列表的绑定，实时触发筛选：

<ion-header>
  <ion-toolbar>
    <ion-title>客户金额筛选</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <!-- 金额输入框，输入变化时触发筛选 -->
  <ion-item>
    <ion-label position="stacked">输入筛选金额</ion-label>
    <ion-input 
      type="number" 
      [(ngModel)]="filterAmount" 
      (ionChange)="filterCustomers()" 
      placeholder="例如：200"
    ></ion-input>
  </ion-item>

  <!-- 展示过滤后的客户列表 -->
  <ion-list>
    <ion-item *ngFor="let customer of filteredCustomers">
      <h3>{{customer.name}}</h3>
      <p>ID: {{customer.id}} | 金额: {{customer.amount}}</p>
    </ion-item>
  </ion-list>

  <!-- 无匹配数据时的提示 -->
  <div *ngIf="filteredCustomers.length === 0" class="empty-tip">
    没有找到金额大于{{filterAmount}}的客户哦~
  </div>
</ion-content>

4. Ionic3中JSON过滤的核心逻辑 #

其实这里的“JSON过滤”本质就是JavaScript对象数组的过滤：

• 如果你是从后端获取JSON格式的数据，Ionic（Angular）会自动把JSON字符串解析成JavaScript对象数组，不需要额外处理；
• 如果拿到的是原始JSON字符串，只需要用JSON.parse(jsonString)转换成对象数组即可；
• 核心方法就是Array.filter()，它会遍历数组，返回满足条件的元素组成的新数组，完全可以满足你的筛选需求。

额外小提示 #

• 输入框用type="number"可以避免用户输入非数字内容，减少后续判断；
• 用(ionChange)事件比(ngModelChange)更适配Ionic的输入组件；
• 初始化时用[...this.customers]做数组拷贝，避免修改原始数据。

内容的提问来源于stack exchange，提问作者Deep Adhia