CODEWITHSUNDEEP
angularhttprxjsobservable
Ashish Patel
Ashish Patel

Reputation: 367

Angular service not working with http.get observable

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.

Upvotes: 5

Views: 4977

Answers (2)

Brendan
Brendan

Reputation: 1035

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

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 3

Related Questions