javascript - 是否有更好的方法从JSON对象获取特定值？

因此，我尝试在模板中显示电影的演员表（仅包含4个演员的名称）。

为此，我正在调用MovieDB API并返回一个JSON对象。

这是我要返回的JSON对象：

{id: 24578, cast: Array(116), crew: Array(160)}

在此，演员表是由116个对象组成的数组，乘员组是160个。

例如，这是强制转换数组中的第一个对象：

{
  cast_id: 46
  character: "Tony Stark / Iron Man"
  credit_id: "52fe4495c3a368484e02b251"
  gender: 2
  id: 3223
  name: "Robert Downey Jr."
  order: 0
  profile_path: "/1YjdSym1jTG7xjHSI0yGGWEsw5i.jpg"
}

我正在尝试获取“名称”属性的值，即“小罗伯特·唐尼”。并显示在我的模板中

movie.service.ts文件

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

 @Injectable({
 providedIn: 'root'
 })

 export class MovieService {

 private movie_url = 'https://api.themoviedb.org/3/';
 private api_key = '52f8b1f1fd9b853d910f3fb53654d48c';
 private movie_string: string;

 constructor(public http: HttpClient) { }

 getMovie(id: number) {
 return this.http.get(`${this.movie_url}movie/${id}?
 api_key=${this.api_key}&language=en-US`);
 }

 getCast(id: number) {
 return this.http.get(`${this.movie_url}movie/${id}/credits?
 api_key=${this.api_key}`);
 }
}

我尝试的方法：

this.movieService.getCast(id).subscribe(cast => {
  this.cast = cast;
  console.log(cast);
  const allCast = Object.values(cast);
  console.log(allCast);
  this.cast = allCast[1].map(el => el.name).slice(0, 4);
  console.log(this.cast);
  });
});

铸造= console.log

{id: 24578, cast: Array(116), crew: Array(160) }

allCast的console.log =

[24578, Array(116), Array(160)]

this.cast的console.log =

["Robert Downey Jr.", "Chris Evans", "Mark Ruffalo", "Chris
Hemsworth"]

以上是我想要的输出。

但是，我想知道是否：

this.cast = allCast[1].map(el => el.name).slice(0, 4);

有一种更好的方法是获取“ allCast”的索引，然后在其上调用.map（）。

目前，这对我来说是有效的，因为返回的JSON仅具有3个属性。但是，如果有成百上千的物业，那就会成问题。

那么，什么比“ allCast [index]”更好的方法呢？

谢谢。

最佳答案

如果您不喜欢使用allCast[1]，则可以执行cast.cast并摆脱allCast：

this.movieService.getCast(id).subscribe(cast => {
  this.cast = cast;
  console.log(cast);
  this.cast = cast.cast.map(el => el.name).slice(0, 4);
  console.log(this.cast);
  });
});