Angular5 HttpClient数据筛选问题：如何按纬度范围过滤结果？

嗨，我来帮你搞定这个过滤数据的问题～你之前用forEach没生效是因为它只是遍历数组执行操作，不会返回新的过滤后数组，咱们换成Array.filter()就能轻松解决啦！

问题原因分析 #

你之前的代码里用forEach遍历spots，但这个方法仅会执行回调逻辑，既不会修改原数组，也不会生成新数组，所以最终返回的还是原始的全部数据，过滤自然没效果。而filter()方法会遍历数组，自动把符合条件的元素收集起来返回一个新数组，这才是咱们实现过滤需要的工具。

修正后的完整代码示例 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 先修正你接口里的拼写错误：sring → string
export interface Spot {
  lat: number;
  lng: number;
  spotname: string;
}

@Injectable()
export class SpotService {
  private apiUrl = '你的JSON API实际地址'; // 替换成你调用的API URL

  constructor(private http: HttpClient) { }

  // 新增带纬度范围过滤的方法
  getFilteredSpots(minlat: number, maxlat: number): Observable<Spot[]> {
    return this.http.get<Spot[]>(this.apiUrl).pipe(
      // 在RxJS的map操作符中，用数组的filter方法筛选符合条件的spot
      map(spots => spots.filter(spot => spot.lat > minlat && spot.lat < maxlat))
    );
  }
}

组件中调用示例 #

在需要使用过滤数据的组件里，这样调用就能拿到结果：

import { Component, OnInit } from '@angular/core';
import { SpotService } from './spot.service';
import { Spot } from './spot.service';

@Component({
  selector: 'app-spot-list',
  templateUrl: './spot-list.component.html'
})
export class SpotListComponent implements OnInit {
  tempspots: Spot[] = [];

  constructor(private spotService: SpotService) { }

  ngOnInit() {
    // 替换成你实际需要的纬度范围
    const targetMinLat = 31.0;
    const targetMaxLat = 32.0;

    this.spotService.getFilteredSpots(targetMinLat, targetMaxLat).subscribe(filteredSpots => {
      this.tempspots = filteredSpots; // 这里就是过滤后的结果啦
    });
  }
}

额外注意事项 #

1. 确认你的minlat数值小于maxlat，否则会过滤出空数组；
2. 如果API返回的是嵌套结构（比如{ data: [...] }），需要先取出数组部分再过滤，示例如下：

map(response => response.data.filter(spot => spot.lat > minlat && spot.lat < maxlat))

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