Google Books Api 書籍情報取得のmapのエラーについて

Question

前提・実現したいこと

• AngularでGoogle Books Apiを使って書籍データを取得したいです。

発生している問題・エラーメッセージ

• SearchBooksの中のmapがエラーになっていて、下記のエラーメッセージが表示されるのですが、どのように修正すればいいのかがわかりません。

• Property 'map' does not exist on type 'Observable<Object>'.

該当のソースコード

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

@Injectable({
    providedIn: 'root'
})
export class GoogleBooksApiService {

    constructor(
        private http: HttpClient,
    ) { }


    SearchBooks(search) {
        const encodedURI = encodeURI("https://www.googleapis.com/books/v1/volumes?q=" + search + "&maxResults=50")
        return this.http.get(encodedURI)
            .map((response: Response) => response.json());
    }
}

補足情報（FW/ツールのバージョンなど）

Angular CLI: 8.3.25
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14

Comments

[tabuu]

>Property 'map' does not exist on type 'Observable<Object>'.
mapというプロパティ(メソッド)が無いというエラーです。

this.http.get(encodedURI)
で想定したデータを取得できているかご確認ください。

Answer 1

現在のObservableはmapメソッドを持っておらず、mapは関数として提供されています。
同じようなことをするにはObservable.pipeメソッドの引数にmap関数を渡してあげることで実現できます。

SearchBooks(search) {
    const encodedURI = encodeURI("https://www.googleapis.com/books/v1/volumes?q=" + search + "&maxResults=50")
    return this.http.get(encodedURI)
        .pipe(
            map((response: Response) => response.json())
        );
}

ただし、HttpClientのgetメソッドは指定がない限りresponse body を json形式に変換したものが帰ってきていますのでここで書いているmap関数は不要です。

おそらく参考にされてるのがangular2~4.1のものなのかもしれません。

Comments

[10210]

ありがとうございます！