Есть ли лучший способ получить конкретные значения из объекта JSON?

Question

Поэтому я пытаюсь отобразить актерский состав для фильма (только имена 4 актеров) в моем шаблоне.

Для этого я вызываю API MovieDB и возвращаю объект 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"
}

Я пытаюсь получить значение свойства 'name', то есть 'Robert Downey Jr.'и отобразите его в моем шаблоне.

файл 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 of cast =

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

console.log of allCast =

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

console.log this.cast =

["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]"?

Спасибо.

Answer 1

На самом деле, если вам нужны только первые 4 names, вы можете сначала slice массив, а затем map над массивом 4 длины (это повысит производительность, поскольку вы не будете отображать весь оригинал массив). Кроме того, свойство cast может быть принято сразу, без необходимости Object.values(). Итак, ваш код может быть уменьшен до этого:

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

Answer 2

Если вам не нравится использовать 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);
  });
});