如何在Angular服务中过滤大型JSON对象提取指定数据？

我需要从目标数据中提取名称、位置（经纬度）以及可用自行车数量，目前在组件里通过订阅后循环的方式实现了需求，但觉得这不是最佳方案。当前组件代码如下：

import { Component, AfterViewInit, OnInit } from '@angular/core';
import * as L from 'leaflet';
import { JcdecauxService } from '../jcdecaux.service';
import { DataBike } from '../jcdecaux/DataBike';
import { MarkerService } from './marker.service';

let datas: any;

@Component({
  selector: 'app-leaflet',
  templateUrl: './leaflet.component.html',
  styleUrls: ['./leaflet.component.css']
})
export class LeafletComponent implements OnInit, AfterViewInit{

  private map: L.Map | undefined;

  private icon: {} = L.icon({
    iconUrl: '../../assets/velo_icon2.png',
    iconSize: [30,30],
    popupAnchor: [0, -10]
  })

  datas: any;
  filteredData:DataBike;
  arrayOfData:DataBike[]= [];

  constructor(private markerService: MarkerService, private jcdecauxService: JcdecauxService){}
    
  ngOnInit(): void {
    this.jcdecauxService.getData().subscribe(data => {
      this.datas = data;
      for(let data of this.datas){
        this.filteredData = {
          name: data.name,
          latitude: data.position.latitude,
          longitude: data.position.longitude,
          availableBikes: data.mainStands.availabilities.bikes
        }
        this.arrayOfData.push(this.filteredData)
      }
      console.log(this.arrayOfData);
    });
  }
}

请问如何直接在Angular服务中完成该JSON数据的过滤操作？

解决方案 #

核心思路是利用RxJS的map操作符，在服务层完成数据转换，让组件只订阅处理好的结构化数据。

1. 修改JcdecauxService服务 #

在服务中引入map操作符，对接口返回的数据进行转换：

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

@Injectable({
  providedIn: 'root'
})
export class JcdecauxService {
  // 替换为你的实际数据源接口地址
  private apiUrl = '你的数据源接口地址';

  constructor(private http: HttpClient) { }

  getData(): Observable<DataBike[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map(rawData => {
        // 在这里完成数据提取转换
        return rawData.map(item => ({
          name: item.name,
          latitude: item.position.latitude,
          longitude: item.position.longitude,
          availableBikes: item.mainStands.availabilities.bikes
        } as DataBike));
      })
    );
  }
}

2. 简化LeafletComponent组件代码 #

组件无需再手动循环处理数据，直接订阅服务返回的DataBike[]即可：

import { Component, AfterViewInit, OnInit } from '@angular/core';
import * as L from 'leaflet';
import { JcdecauxService } from '../jcdecaux.service';
import { DataBike } from '../jcdecaux/DataBike';
import { MarkerService } from './marker.service';

@Component({
  selector: 'app-leaflet',
  templateUrl: './leaflet.component.html',
  styleUrls: ['./leaflet.component.css']
})
export class LeafletComponent implements OnInit, AfterViewInit{

  private map: L.Map | undefined;

  private icon: {} = L.icon({
    iconUrl: '../../assets/velo_icon2.png',
    iconSize: [30,30],
    popupAnchor: [0, -10]
  })

  arrayOfData: DataBike[] = [];

  constructor(private markerService: MarkerService, private jcdecauxService: JcdecauxService){}
    
  ngOnInit(): void {
    this.jcdecauxService.getData().subscribe(filteredData => {
      this.arrayOfData = filteredData;
      console.log(this.arrayOfData);
      // 这里可以直接使用处理好的数据，比如传入markerService创建标记
    });
  }
}

关键优势 #

• 逻辑解耦：数据处理逻辑统一放在服务层，组件只负责视图相关逻辑；
• 可复用性：如果其他组件需要相同结构的数据，直接调用服务方法即可；
• 可维护性：后续调整数据提取规则时，仅需修改服务中的转换逻辑，无需改动多个组件。

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