Discovering an item in a JSON Array based on a parameter utilizing a Promise - what's the best approach?

Question

Discovering an item in a JSON Array based on a parameter utilizing a Promise - what's the best approach?

Upon making a JSON request, I received the following data:

{"page": 1,
  "results": [
    {
      "poster_path": "/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg",
      "adult": false,
      "overview": "Framed in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne begins a new life at the Shawshank prison, where he puts his accounting skills to work for an amoral warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates -- including an older prisoner named Red -- for his integrity and unquenchable sense of hope.",
      "release_date": "1994-09-10",
      "genre_ids": [
        18,
        80
      ],
      "id": 278,
      "original_title": "The Shawshank Redemption",
      "original_language": "en",
      "title": "The Shawshank Redemption",
      "backdrop_path": "/xBKGJQsAIeweesB79KC89FpBrVr.jpg",
      "popularity": 5.446135,
      "vote_count": 5250,
      "video": false,
      "vote_average": 8.32
    },
    {
      "poster_path": "/lIv1QinFqz4dlp5U4lQ6HaiskOZ.jpg",
      "adult": false,
      "overview": "Under the direction of a ruthless instructor, a talented young drummer begins to pursue perfection at any cost, even his humanity.",
      "release_date": "2014-10-10",
      "genre_ids": [
        18,
        10402
      ],
      "id": 244786,
      "original_title": "Whiplash",
      "original_language": "en",
      "title": "Whiplash",
      "backdrop_path": "/6bbZ6XyvgfjhQwbplnUh1LSj1ky.jpg",
      "popularity": 9.001948,
      "vote_count": 2072,
      "video": false,
      "vote_average": 8.28
    },

I am attempting to locate a specific object based on its Id using a service:

@Injectable()
export class MovieService {

    constructor(private http:Http) { }

    getMovies(): Promise<Movie[]>{

        return this.http.get('http://api.themoviedb.org/3/movie/top_rated?api_key=API-KEY')
            .toPromise()
            .then((res:Response) => res.json()['results'])

    }
    getMovie(id: number): Promise<Movie> {
        return this.getMovies()
            .then(movies => movies.find(movie => movie.id == id));

    }
}

However, when executing the getMovie() method, I encounter an EXCEPTION: Uncaught (in promise), with an error stating 'id undefined'. How can I successfully retrieve the desired object?

json angular typescript

Answer 1

Answer №1

Check out my solution on Plunker to resolve your problem.

Plunker

I strongly recommend using Observables instead of Promises in this scenario.

These are the two methods included in your service:

getMovies() : Observable<any>{
    return this.http.get('./src/data.json')
}
getMovieById(id: number): Observable<any> {
    return this.getMovies().map( res =>{

      let response = res.json()['results'];

      return response.find(item => item.id === id)
    })
}

Here is the component code:

export class App {
  constructor(private movieService:MovieService) {
    this.movieService.getMovieById(278).subscribe(res => console.log(res))
  }
}

I won't delve deep into Observables here since there are plenty of resources available online. If you're unfamiliar with them, think of Observables as a combination of promises and event emitters.

Each time an event occurs, the observable emits that event to all subscribers. The subscribe method can be likened to a forEach loop.

Therefore,

this.movieService.getMovieById(278).subscribe(res => console.log(res))

can be understood as

this.movieService.getMovieById(278).forEach(res => console.log(res))

Whenever the Observable emits something, the emitted value will be processed by the forEach function.

I hope this explanation proves helpful.

Cheers!

Answer 2

Check out my solution on Plunker to resolve your problem.

Plunker

I strongly recommend using Observables instead of Promises in this scenario.

These are the two methods included in your service:

getMovies() : Observable<any>{
    return this.http.get('./src/data.json')
}
getMovieById(id: number): Observable<any> {
    return this.getMovies().map( res =>{

      let response = res.json()['results'];

      return response.find(item => item.id === id)
    })
}

Here is the component code:

export class App {
  constructor(private movieService:MovieService) {
    this.movieService.getMovieById(278).subscribe(res => console.log(res))
  }
}

I won't delve deep into Observables here since there are plenty of resources available online. If you're unfamiliar with them, think of Observables as a combination of promises and event emitters.

Each time an event occurs, the observable emits that event to all subscribers. The subscribe method can be likened to a forEach loop.

Therefore,

this.movieService.getMovieById(278).subscribe(res => console.log(res))

can be understood as

this.movieService.getMovieById(278).forEach(res => console.log(res))

Whenever the Observable emits something, the emitted value will be processed by the forEach function.

I hope this explanation proves helpful.

Cheers!

Answer 3

Answer №2

After some investigation, I uncovered an error in my TopmoviesDetail component. The issue arose when calling the getMovie(id) function, as depicted below:

 ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            let id = +params['id'];
            this.movieService.getMovie(id)
                .then(movie => this.movie = movie);

        });
    }

In reviewing the template code, it became apparent that I had overlooked including *ngIf="movie". Once rectified, all functionalities returned to normal.

@Component({

    selector: 'topmovies',
    template: ` 
    <div *ngIf="movie">// I forgot to add this line
    <h2>{{movie.id}}</h2>
    <h2>{{movie.original_title}} </h2>
    </div>

    `
})

Answer 4

After some investigation, I uncovered an error in my TopmoviesDetail component. The issue arose when calling the getMovie(id) function, as depicted below:

 ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            let id = +params['id'];
            this.movieService.getMovie(id)
                .then(movie => this.movie = movie);

        });
    }

In reviewing the template code, it became apparent that I had overlooked including *ngIf="movie". Once rectified, all functionalities returned to normal.

@Component({

    selector: 'topmovies',
    template: ` 
    <div *ngIf="movie">// I forgot to add this line
    <h2>{{movie.id}}</h2>
    <h2>{{movie.original_title}} </h2>
    </div>

    `
})

Discovering an item in a JSON Array based on a parameter utilizing a Promise - what's the best approach?

Answer №1

Answer №2

Similar questions

trpc - Invoking a route from within its own code

Limiting the assignment of type solely based on its own type, without considering the components of the type

Angular CLI simplifies the process of implementing internationalization (i18n) for Angular

What steps should I follow to configure tastypie to support a JSONField?

Efficient method to identify distinct keys within a collection of objects using Typescript

Converting literal types within simulated JSON data

Handling Errors in RXJS Angular - Utilizing .subscribe and Observable Strategy

Integrating Ruby on Rails models to generate JSON output

Steps to transfer JSON data from view to controller using the redirect function in the CodeIgniter framework

Exploring the Flatmap Promise Feature in JavaScript

Button activated by specified row index in Angular test

Troubleshooting TypeScript in VSCode while working with Asp.Net Core 3.1

Is there a way to showcase geojson data in a table using ng-repeat loop in Angular framework?

What types of configuration options does SparkSession offer?

A guide on extracting keys and values from a JSON object and saving them in an array with the useState hook in a React application

What is the best way to remove directory structure from the output using grunt-concat-json?

Employing jq to transfer the value of a child property to the parent dictionary

Passing parameters as JSON and using them as arguments in ActiveJob

Ways to obtain a referrer URL in Angular 4

Utilizing a single resolver for both parent and child routes in Angular 2