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
– SiddAjmera, Commented Sep 2, 2018 at 12:13
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
– SiddAjmera, Commented Sep 2, 2018 at 12:18
@SiddharthAjmera Please see the link movies-api-ng.stackblitz.io — Ashish Patel
– Ashish Patel, Commented Sep 2, 2018 at 14:50
The API that you're using is not secure. Try using a secure API to get the movies. — SiddAjmera
– SiddAjmera, Commented Sep 2, 2018 at 15:06

SiddAjmera · Accepted Answer · 2018-09-02 15:15:12Z

3

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.

edited Sep 2, 2018 at 15:15

answered Sep 2, 2018 at 12:09

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashish Patel Over a year ago

I'm using angular 6. It cannot find @angular/common/http. Could only import Http from @angular/http

Ashish Patel Over a year ago

please check the editor url : stackblitz.com/edit/movies-api-ng

Ashish Patel Over a year ago

Insecure API call was the problem. Thank you very much for helping out. I've hosted the API on GitHub and it worked. I'm restricted to use the same API data in my test.

Brendan · Accepted Answer · 2021-04-03 02:25:41Z

0

In my case, I had both HttpClientTestingModule and HttpClientModule in the imports section of my app.module.ts file.

Removing the HttpClientTestingModule from the app.module.ts fixed my issue.

Angular: 11.0.9

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

answered Apr 3, 2021 at 2:25

Brendan

1,07511 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular service not working with http.get observable

2 Answers 2

Update

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related