Exploring observables for querying the OMDB API and obtaining information on movies

Question

Exploring observables for querying the OMDB API and obtaining information on movies

Hey everyone, I'm currently working on implementing a live search feature using Observables in Angular2 to fetch Movie data from the OMDB API. While I can see that it is functioning correctly in the Chrome Network tab, the results aren't showing up in the user interface.

@Component({
  selector: 'movie-card',
  templateUrl: './card.component.html'
})
export class Component implements OnInit{
  movies: Observable<Array<Movie>>;
  search = new FormControl;

  constructor(private service: MovieService) {}

  ngOnInit(){
    this.movies = this.search.valueChanges
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap(search => this.service.get(search))
  }
}

MovieService

@Injectable()
export class MovieService {
  constructor (private http: Http) { }
  get(path: string){
    return this.http
      .get('www.omdbapi.com/?s=' + path)
      .map((res) => res.json())
  }
}

In my HTML Component, I have an input field and the UI section to display the results.

<input [formControl]="search"> 

<div *ngFor="let movie of movies | async">

<h1>{{movie.title}}</h1>

Even though I can see the results in the Network Tab while typing:

The UI doesn't update with the results. Any assistance would be greatly appreciated. Thank you!

angular typescript angular2-observables

Answer 1

Answer №1

The API you are utilizing provides a JSON object instead of an array. For instance, when you access

http://www.omdbapi.com/?s=jason%20bourne

, the response will look something like this:

{
  "Search": [
    {
      "Title": "Jason Bourne",
      "Year": "2016",
      "imdbID": "tt4196776",
      "Type": "movie",
      "Poster": "https:\/\/images-na.ssl-images-amazon.com\/images\/M\/MV5BMTU1ODg2OTU1MV5BMl5BanBnXkFtZTgwMzA5OTg2ODE@._V1_SX300.jpg"
    },
    ...
  ],
  "totalResults": "16",
  "Response": "True"
}

If your service is expected to return an array of movies, it should extract the Search property from the result:

@Injectable()
export class MovieService {
  constructor (private http: Http) { }
  get(path: string){
    return this.http
      .get('www.omdbapi.com/?s=' + path)
      .map((res) => res.json().Search || [])
  }
}

Answer 2

The API you are utilizing provides a JSON object instead of an array. For instance, when you access

http://www.omdbapi.com/?s=jason%20bourne

, the response will look something like this:

{
  "Search": [
    {
      "Title": "Jason Bourne",
      "Year": "2016",
      "imdbID": "tt4196776",
      "Type": "movie",
      "Poster": "https:\/\/images-na.ssl-images-amazon.com\/images\/M\/MV5BMTU1ODg2OTU1MV5BMl5BanBnXkFtZTgwMzA5OTg2ODE@._V1_SX300.jpg"
    },
    ...
  ],
  "totalResults": "16",
  "Response": "True"
}

If your service is expected to return an array of movies, it should extract the Search property from the result:

@Injectable()
export class MovieService {
  constructor (private http: Http) { }
  get(path: string){
    return this.http
      .get('www.omdbapi.com/?s=' + path)
      .map((res) => res.json().Search || [])
  }
}

Answer 3

Answer №2

This method proved effective for me when working with Angular 6

Service file:

import { Injectable } from '@angular/core';
import 'rxjs/RX';
import 'rxjs/add/operator/map';
import {Http, Response} from '@angular/http';

@Injectable()

 export class omdbService {
 searchMovieByTitle(title: String) {
 const url = 'http://www.omdbapi.com/?s=' + title + '&apikey=da53126b';
  return this.http.get(url).map( (response: Response ) => {
   return response.json();  } ); }

   constructor (private http: Http) { }
   }

HTML file:

     <label>movietitle</label>
      <input #input class="form-control" />
       <button mdbBtn type="button" color="info" outline="true" mdbWavesEffect
           (click)="searchMovie(input.value)" >
         Search
        </button>

     <ul class="list-group">
       <li  class="list-group-item" *ngFor =" let movie of result.Search" >
           {{movie.Title}}   {{movie.imdbID}}
      </li>
    </ul>

Ts file:

import { omdbService } from './../service/omdb.service';
import { Component } from '@angular/core';
 @Component({
             selector: 'app-search',
             templateUrl: './search.component.html',
             styleUrls: ['./search.component.scss']
                })

    export class SearchComponent  {

         title  = '';
         result: Object = null;

     searchMovie(title: String) {
        this.OmdbService.searchMovieByTitle(title).subscribe( (result) => {
      this.result = result;     console.log(result);
             });                }

      constructor(private OmdbService: omdbService) { }

        }

Answer 4

This method proved effective for me when working with Angular 6

Service file:

import { Injectable } from '@angular/core';
import 'rxjs/RX';
import 'rxjs/add/operator/map';
import {Http, Response} from '@angular/http';

@Injectable()

 export class omdbService {
 searchMovieByTitle(title: String) {
 const url = 'http://www.omdbapi.com/?s=' + title + '&apikey=da53126b';
  return this.http.get(url).map( (response: Response ) => {
   return response.json();  } ); }

   constructor (private http: Http) { }
   }

HTML file:

     <label>movietitle</label>
      <input #input class="form-control" />
       <button mdbBtn type="button" color="info" outline="true" mdbWavesEffect
           (click)="searchMovie(input.value)" >
         Search
        </button>

     <ul class="list-group">
       <li  class="list-group-item" *ngFor =" let movie of result.Search" >
           {{movie.Title}}   {{movie.imdbID}}
      </li>
    </ul>

Ts file:

import { omdbService } from './../service/omdb.service';
import { Component } from '@angular/core';
 @Component({
             selector: 'app-search',
             templateUrl: './search.component.html',
             styleUrls: ['./search.component.scss']
                })

    export class SearchComponent  {

         title  = '';
         result: Object = null;

     searchMovie(title: String) {
        this.OmdbService.searchMovieByTitle(title).subscribe( (result) => {
      this.result = result;     console.log(result);
             });                }

      constructor(private OmdbService: omdbService) { }

        }

Exploring observables for querying the OMDB API and obtaining information on movies

Answer №1

Answer №2

Similar questions

Limiting the use of the Tab key within a modal dialog box

The type definition file for '@types' is not present in Ionic's code base

What steps should I follow to properly set up my tsconfig.json in order to ensure that only the essential files are included when executing npm run build

The text inside the Mapbox GL popup cannot be highlighted or copied

Experiencing a problem with Typescript validation while integrating Storybook with Material-UI (

The expression has been altered following verification. It previously read as 'model: 1777' but now states 'model: 2222'

Display a React functional component

What's the best way to make a toast notification appear when an API call is either successful or encounters

I am attempting to make the fade in and out effect function properly in my slideshow

Angular 2 is throwing an error stating that the argument 'ElementRef' cannot be assigned to the parameter 'ViewContainerRef'

Ways to implement a package designed for non-framework usage in Vue

Encountering an ExpressionChangedAfterItHasBeenCheckedError in Angular 6 when selecting an option from a dropdown menu

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

Unable to utilize Google Storage within a TypeScript environment

When Typescript calls the toString method on a Function, it produces unexpected characters like "path_1, (0, promises.writeFile)"

A simple way to automatically fill an input field with a mask when clicking in Angular 2

Using ngFor to iterate over an array after it has been loaded

Could someone provide an explanation for the meaning of the phrase "class User extends Model<UserAttribute UserCreationAttribute>"?

Updating an array in a single line of code in Javascript can be achieved

What is the best way to time a Google Cloud Function to execute at the exact second?