I've been working on an Angular app to fetch data from an API successfully. However, I'm currently facing a challenge while implementing a search function in my component.ts file.
Here is the entire service code:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, take } from 'rxjs';
import { RouterModule } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class MoviesService {
baseUrl: string;
apiKey: string;
language: string;
region: string;
constructor(
private http: HttpClient
) {
this.baseUrl = 'https://api.themoviedb.org/3/';
this.apiKey = 'dd4d819639705d332d531217b4f7c6b6';
this.language = 'en-US';
this.region = 'US';
}
getCatalog() {
return this.http.get(`${this.baseUrl}movie/top_rated?api_key=${this.apiKey}&page=1&language=${this.language}®ion=${this.region}`) as Observable<Catalog>;
}
getMovie(id:string) {
return this.http.get(`${this.baseUrl}movie/${id}?api_key=${this.apiKey}&language=${this.language}®ion=${this.region}`) as Observable<Movie>;
}
getSearchedMovie(username:string): Observable<any> {
return this.http.get(`${this.baseUrl}search/movie?api_key=${this.apiKey}&language=${this.language}®ion=${this.region}`) as Observable<Movie>;
}}
export interface Catalog {
page: number;
results: Movie[];
total_pages: number;
total_results: number;
}
export interface Movie {
title: string;
id: number;
overview: string;
original_title: string;
poster_path: string;
}
Now, moving on to the component.ts file:
import { NgFor } from '@angular/common';
import { Component, NgModule, OnInit } from '@angular/core';
import { debounceTime, distinctUntilChanged, switchMap, take } from 'rxjs';
import { Catalog, Movie, MoviesService } from 'src/app/services/movies.service';
import { RouterModule } from '@angular/router';
import { FormControl, FormGroup } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-catalog',
templateUrl: './catalog.component.html',
styleUrls: ['./catalog.component.css']
})
export class CatalogComponent {
searchForm:FormGroup = new FormGroup({
search: new FormControl('')
})
catalog: Movie[];
constructor(
private moviesService: MoviesService,
public movieList:Array<any>=[],
) {
this.searchForm.get('search')?.valueChanges.pipe(debounceTime(1000)),
switchMap((v) => this.moviesService.getMovie(v)).subscribe((v) => {
this.movieList=v?.users
})
}
ngOnInit() {
this.moviesService.getCatalog().pipe(take(1)).subscribe(res =>{
this.catalog = res.results;
console.log("this catalog dentro del observable", this.catalog);
});
}
};
A particular line in the code seems to be causing issues:
this.searchForm.get('search')?.valueChanges.pipe(debounceTime(1000)),
switchMap((v) => this.moviesService.getMovie(v)).subscribe((v) => {
this.movieList=v?.users
})
The errors are related to the second parameter (v) and .subscribe method:
- Argument of type 'unknown' is not assignable to parameter of type 'string'.
- Property 'subscribe' does not exist on type 'OperatorFunction<unknown, Movie>'.
Could you spot anything that might be missing or causing these errors?