如何用Typescript获取json对象？

Question

我正在尝试通过 firebase rest api 按 job_id 获取工作。我在下面得到这个 JSON 结果。我如何摆脱 0 并获得对象？

有没有更好的方法通过 Firebase Rest API 获得工作？ 这是我的代码：

{
    "0": {
        "category_id": 0,
        "created_on": "Mar 29, 2024",
        "description": "Dolor justo tempor duo ipsum accusam rebum gubergren erat. Elitr stet dolor vero clita labore gubergren. Kasd sed ipsum elitr clita rebum ut sea diam tempor. Sadipscing nonumy vero labore invidunt dolor sed, eirmod dolore amet aliquyam consetetur lorem, amet elitr clita et sed consetetur dolore accusam.",
        "job_id": "TEL5UAVd5b3Q4jLY2aFfWs4QneMO",
        "job_nature": "Full-time",
        "location": "Gabrovo, Bulgaria",
        "qualifications": [
            "Rebum vero dolores dolores elitr",
            "Elitr stet dolor vero clita labore gubergren",
            "Dolor justo tempor duo ipsum accusam"
        ],
        "salary": "$1500-$1900",
        "title": "Marketing manager",
        "user_id": "qDDuvTWL00N2sNXPhMy2rE0ZB8w2"
    }
}

export class JobDetailComponent implements OnInit {
  job = {} as Job;

  constructor(
    private apiService: ApiService,
    private activeRoute: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.activeRoute.params.subscribe((data) => {
      const id = data['jobId'];

      this.apiService.getJob(id).subscribe((job) => {
        this.job = job;
        console.log(job)
      });
    });
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment.development';
import { Category } from './types/category';
import { Job } from './types/job';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) { }

  getCategories() {
    const { apiUrl } = environment;
    return this.http.get<Category[]>(`${apiUrl}/categories.json`);
  }
  getJobs() {
    const { apiUrl } = environment;
    return this.http.get<Job[]>(`${apiUrl}/jobs.json`);
  }
  getJob(id: string) {
    const { apiUrl } = environment;
    return this.http.get<Job>(`${apiUrl}/jobs.json?orderBy="job_id"&equalTo="${id}"`);
  }
}

Answer 1

在

getJob

函数中，您可以使用

map

RxJS 运算符将可观察值更改为：

import { map } from 'rxjs';

getJob(id: string) {
  const { apiUrl } = environment;
  return this.http.get<Record<string, Job>>(`${apiUrl}/jobs.json?orderBy="job_id"&equalTo="${id}"`)
    .pipe(map((resp: Record<string, Job>) => resp["0"] as Job));
}

如果密钥是动态的，您可以从

Object.values()

函数获取第一个值。

import { map } from 'rxjs';

getJob(id: string) {
  const { apiUrl } = environment;
  return this.http.get<Record<string, Job>>(`${apiUrl}/jobs.json?orderBy="job_id"&equalTo="${id}"`)
    .pipe(map((resp: Record<string, Job>) => Object.values(resp)[0] as Job));
}