如何用TypeScript提取目标JSON对象？Firebase REST API获取Job优化

一、去除返回结果的外层"0"键 #

你当前用orderBy="job_id"&equalTo="${id}"查询时，Firebase REST会返回一个包含匹配项的对象（哪怕只有一条数据），外层的"0"是Firebase生成的索引键。要直接获取职位对象，只需在ApiService里处理返回数据：

1. 先导入RxJS的map操作符：

import { map } from 'rxjs/operators';

2. 修改getJob方法，提取对象中的第一个值：

getJob(id: string) {
  const { apiUrl } = environment;
  return this.http.get<{ [key: string]: Job }>(`${apiUrl}/jobs.json?orderBy="job_id"&equalTo="${id}"`).pipe(
    map(response => {
      // 因为job_id唯一，结果只会有一个，取第一个值即可
      return Object.values(response)[0];
    })
  );
}

这样组件订阅后拿到的就是直接的Job对象，不需要再处理外层键。

二、更优的Firebase查询实现方式 #

上面的查询需要Firebase遍历匹配，效率不如直接通过节点路径访问。建议调整数据存储结构并简化查询：

调整存储结构 #

把job_id作为jobs节点的子键，存储结构改成：

jobs
  └── TEL5UAVd5b3Q4jLY2aFfWs4QneMO
        ├── category_id: 0
        ├── created_on: "Mar 29, 2024"
        ├── description: "xxx"
        └── ...其他职位字段

简化查询方法 #

修改getJob方法，直接通过ID访问对应节点：

getJob(id: string) {
  const { apiUrl } = environment;
  return this.http.get<Job>(`${apiUrl}/jobs/${id}.json`);
}

这种方式无需查询参数，Firebase直接定位到目标节点，返回结果就是单个职位对象，没有外层多余键，查询效率更高。

组件代码优化（可选） #

用switchMap替换嵌套订阅，让代码更简洁：

import { switchMap } from 'rxjs/operators';

// ...

ngOnInit(): void {
  this.activeRoute.params.pipe(
    switchMap(data => this.apiService.getJob(data['jobId']))
  ).subscribe(job => {
    this.job = job;
    console.log(job);
  });
}

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