Is there a better way to get specific values from a JSON object?

Question

So I'm trying to display the cast for a movie(only names of 4 cast members) in my template.

For this, I'm calling the MovieDB API and getting back a JSON object.

This is the JSON object that I'm getting back:

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

Here, cast is an Array of 116 objects, and crew is 160.

For instance, here's the first object in the cast array:

{
  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"
}

I'm trying to get the value of the 'name' property, ie 'Robert Downey Jr.' and display it in my template.

movie.service.ts file

 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}`);
 }
}

The approach I tried:

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 of this.cast =

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

The above is the output that I wanted.

However, I'm wondering if:

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

there's a better approach that getting the index of "allCast" and then calling .map() on it.

This has worked for me for now, as the returned JSON only had 3 properties. But it'd get problematic if there were hundreds of properties.

So what would be the better approach than, "allCast[index]" ?

Thanks.

Answer 1

If you don't like using allCast[1] , you could just do cast.cast , and get rid of 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);
  });
});

Answer 2

Actually, if you only need the first 4 names you could actually slice the array first and then map over the 4-length array (this will improve performance, since you won't map the whole original array). Also, property cast can be accesed direclty with no need of Object.values() . So, your code can be reduced to this:

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