使用RxJS解析Angular HTTP返回对象中的深层JSON属性list

假设你已经在组件中注入了HttpClient服务，下面是两种直接提取目标list数据的实用方法：

方法1：订阅时直接解构数据 #

发起请求后，在subscribe回调里直接访问响应对象的层级属性，拿到json.data.list：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private http: HttpClient) {}

  fetchTargetList() {
    this.http.get('你的请求接口URL').subscribe((response: any) => {
      const targetList = response.json.data.list;
      // 这里即可使用提取到的list数组
      console.log(targetList);
    });
  }
}

方法2：用RxJS map操作符提前处理数据流 #

如果想在订阅前就完成数据筛选，避免在回调里做过多逻辑，可以用map操作符转换数据流：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private http: HttpClient) {}

  fetchTargetList() {
    this.http.get('你的请求接口URL')
      .pipe(
        map((response: any) => response.json.data.list)
      )
      .subscribe((targetList) => {
        // 这里拿到的直接就是目标list数组
        console.log(targetList);
      });
  }
}

（可选）用TypeScript接口实现类型安全 #

为了避免any类型带来的不确定性，可以定义对应的数据接口，获得完整的类型提示：

// 定义列表项的结构
interface TargetListItem {
  tgCode: string;
  tgName: string;
  tgLevelId: number;
  tgStatus: number;
  tgTypeId: number;
  createUser: string;
  archiveNote: string | null;
  createTime: string;
  archiveTime: string | null;
  operateUserList: string;
}

// 定义接口返回的完整结构
interface ApiResponse {
  errno: number;
  data: {
    pageNum: number;
    pageSize: number;
    totalPage: number;
    total: number;
    list: TargetListItem[];
  };
}

// 请求时指定类型
this.http.get<{ json: ApiResponse }>('你的请求接口URL')
  .pipe(
    map(response => response.json.data.list)
  )
  .subscribe((targetList: TargetListItem[]) => {
    console.log(targetList);
  });

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