In my test Angular project, I think something is wrong with my mapping function

Question

It is supposed to call the pixabay API to search for images. Everything else seems fine however when I search for anything I get no results of images. I think it is because of the mapping line but not sure, I am a beginner with Angular

import {Injectable} from '@angular/core';
import { environment } from '../../environments/environment';
import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators'

@Injectable()
export class ImageService{
  private query: string;
  private API_KEY: string = environment.PIXABAY_API_KEY;
  private API_URL: string = environment.PIXABAY_API_URL;
  private URL: string = this.API_URL + this.API_KEY + '&q=';
  private perPage: string = "&per_page=10";

constructor(private _http: Http) { }

getImage(query){
    return this._http.get(this.URL + query + this.perPage).map(res => 
        res.json());
    }
}

This is a snippet of my image-list.component.ts :

handleSuccess(data){
   this.imagesFound = true;
   this.images = data.hits;
   console.log(data.hits);
 }


 handleError(error){
  console.log(error);

 }

constructor(private _imageService : ImageService) { }

searchImages (query: string){
    return this._imageService.getImage(query).subscribe(
        data => this.handleSuccess(data),
        error => this.handleError(error),
        () => this.searching = false
    );
}

ngOnInit() {}

I think so, I watched a tutorial on youtube and that is how they did it — ahakjsdh, Sep 19 '18 at 15:55
ERROR TypeError: this._http.get(...).map is not a function at ImageService.push../src/app/shared/image.service.ts.ImageService.getImage (image.service.ts:18) at ImageListComponent.push../src/app/image-list/image-list.component.ts.ImageListComponent.searchImages (image-list.component.ts:30) at Object.eval [as handleEvent] (ImageListComponent.html:7) at handleEvent (core.js:10258) — ahakjsdh, Sep 19 '18 at 16:05
Did you import the `HttpClient` in your `app.modules.ts` **after** `BrowserModule`? — Batajus, Sep 19 '18 at 16:13
It's because you're not importing `map`. See my response below. — sketchthat, Sep 19 '18 at 17:32

sketchthat · Accepted Answer · 2018-09-19T17:28:24.147

0

The error message you're seeing is;

 ERROR TypeError: this._http.get(...).map is not a function at ImageService.push../src/app/shared/image.service.ts.ImageService.getImage (image.service.ts:18) at ImageListComponent.push../src/app/image-list/image-list.component.ts.ImageListComponent.searchImages (image-list.component.ts:30) at Object.eval [as handleEvent] (ImageListComponent.html:7) at handleEvent (core.js:10258)

It mentions that map is not a function. It needs to be imported;

import 'rxjs/add/operator/map'

The import you're using is not the correct way to access this function.

import { map } from 'rxjs/operators'

For more information see this other StackOverflow post which explains the solution in more detail.

edited Sep 19 '18 at 17:28

answered Sep 19 '18 at 15:43

sketchthat

2,678
2
13
22

Thanks for the response, still a little confused though. I updated my question also – ahakjsdh Sep 19 '18 at 15:51
What do `handleSuccess` and `handleError` functions look like? – sketchthat Sep 19 '18 at 15:55
I'll update my answer as your original question didn't show that you were subscribing to the result. I had assumed you were trying to have a `Promise` returned. – sketchthat Sep 19 '18 at 15:56
ok thanks, do you still want to see handleError and handleSuccess? – ahakjsdh Sep 19 '18 at 15:56
Yes please. Have you put logging in them to see what the output is? – sketchthat Sep 19 '18 at 15:58

In my test Angular project, I think something is wrong with my mapping function

1 Answers1