Angular service not working with http.get observable

Question

I am trying to retrieve json file from the server using http.get and subscribe to the observable from a component. However, it's returning an error, not the data.

Can you please tell me where I'm going wrong:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';

@Injectable()
export class MoviesService {

  constructor(private http: Http) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

and here's the component:

import { Component } from '@angular/core';
import { MoviesService } from './movies.service';

@Component({
  selector: 'movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.css'],
  providers: [
    MoviesService
  ]
})

export class MoviesComponent {

  constructor(private moviesService: MoviesService) {};

  ngOnInit() {
    this.moviesService.getMovies().subscribe(
      (data: any) => {
        console.log("Success " + data);
      },
      (err) => {
        console.log("Error: " + JSON.stringify(err));
      }
    );
  }
}

I'm using latest versions of Angular and rxjs library.

Please help.

Do you see any errors on the console. Open Dev Tools in your Browesr, Navigate to the Network Tab, Click Filter and see the XHR section to see the request and check if it responded successfully. — SiddAjmera
If my answer didn't solve you issue, consider creating a StackBlitz Demo so that someone could have a look into it. You can create one here: stackblitz.com/fork/angular — SiddAjmera
@SiddharthAjmera Please see the link movies-api-ng.stackblitz.io — Ashish Patel
The API that you're using is not secure. Try using a secure API to get the movies. — SiddAjmera

SiddAjmera SiddAjmera · Accepted Answer · 2018-09-02T12:09:51

Use HttpClient instead of Http. Http returns an Object of type Response. You'll have to call the json() method on it which will give you the data that you're looking for.

To avoid doing that, use HttpClient. And to use HttpClient, you'll have to first add HttpClientModule to the imports array of your module.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MoviesService {

  constructor(private http: HttpClient) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

Update

Your API isn't secure. That's why the client is blocking it and giving a mixed content error. This generally happens when some of your content is served over HTTPS and some are served over HTTP. I don't really think there's a way to fix this without changing the API.

You should consider using an secure API for movies.

You can use OMDb API. It's a Secure and Free API to get movie details. You'll have to create an API Key first. You can do that here.

Package	Version
@angular-devkit/architect	0.1100.7
@angular-devkit/build-angular	0.1100.7
@angular-devkit/core	11.0.7
@angular-devkit/schematics	11.0.7
@angular/cdk	11.2.5
@angular/cli	11.0.7
@angular/material	11.2.5
@schematics/angular	11.0.7
@schematics/update	0.1100.7
rxjs	6.6.6
typescript	4.0.7

Angular service not working with http.get observable

2 Answers

Update