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:

https://i.sstatic.net/Zwwle.png

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

What steps should I take to retrieve my information from a typescript callback function?

Can you identify the nature of the argument(s) used in a styled-component?

Utilizing indexes to incorporate elements into an object array

Changing a numeric string into a number within an Angular 2 application

Unable to access the HTTP POST response data beyond the .subscribe method

Tips for preventing the error message "The property 'map' is not present on type 'string | string[]'."

Has anyone tried using the JSON1 extension with Angular in an Ionic project?

Text input builder design pattern akin to roster creator design pattern

Include a link in the email body without displaying the URL

Different and Basic Designs for mat-table

Is there a way to retrieve a specific type from a union-based type by using a generic function in Typescript?

Converting a string to an HTML object in Angular using Typescript and assigning it to a variable

What is the reason for an optional object property being assigned the 'never' type?

Issues with Angular 2 and Deserialization of .NET List<T>

Loop through a collection of map instances in TypeScript

Here is a unique version: "Dealing with Node.js ES6 (ESM) Modules in TypeScript can be tricky, especially when the TypeScript Compiler (TSC) fails to emit the

Using ngFor to dynamically populate drop-down options from a key value object in Angular 2

Using a basic XML file in Angular: A beginner's guide

Transforming a JavaScript Date object to a Java LocalDateTime

Designing the Pull to Refresh feature in Nativescript Angular