this.http.get(...).map is not a function
11,441
You are using the dot chain operator .map
. The import should be
import 'rxjs/add/operator/map';
import { map } from 'rxjs/operators';
refers to the pipeable operator map
this.http.get(...).pipe(
map(...)
);
Author by
Perinban Parameshwaran
Updated on June 07, 2022Comments
-
Perinban Parameshwaran almost 2 years
I am using Angular 5.0.3.The error occurs when I created an promise and tried to subscribe it. When i try to execute my code, I get the following error as in the uploaded image.. I tried with every possibility to solve this error, but unfortunately I can't able to solve it.
Elite-api.ts
import { Injectable } from '@angular/core'; import { Http,Response } from '@angular/http'; //import { HttpClient } from "@angular/common/http"; //import 'rxjs'; //import 'rxjs/add/operator/map' import { map } from 'rxjs/operators'; //import 'rxjs/add/operator/catch'; import { Observable } from 'rsjs/Observable'; @Injectable() export class EliteApi{ private baseUrl = 'https://elite-schedule-c1e63.firebaseio.com//'; currentTourney:any = {}; constructor(private http: Http){} getTournaments(){ return new Promise(resolve => { this.http.get(`${this.baseUrl}/tournaments.json`) .subscribe((res: Response) => resolve(res.json())); }); } getTournamentData(tourneyId) : Observable<any>{ return this.http.get('${this.baseUrl}/tournaments-data/${tourneyId}.json') .map((res: Response) => { this.currentTourney = res.json(); return this.currentTourney; }); } }
teams.js
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { TeamHomePage } from '../team-home/team-home'; import { EliteApi } from '../../shared/elite-api' @IonicPage() @Component({ selector: 'page-teams', templateUrl: 'teams.html', }) export class TeamsPage { public teams = []; constructor(public navCtrl: NavController, public navParams: NavParams, private eliteApi: EliteApi) {} ionViewDidLoad(){ let selectedTourney = this.navParams.data; this.eliteApi.getTournamentData(selectedTourney.id).subscribe(data => { this.teams = data.teams; }); } itemTapped($event, team){ this.navCtrl.push(TeamHomePage,team); } }
tournaments.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { TeamsPage } from '../teams/teams'; import { EliteApi } from '../../shared/elite-api' @IonicPage() @Component({ selector: 'page-tournaments', templateUrl: 'tournaments.html', }) export class TournamentsPage { public tournaments:any; constructor( public navCtrl: NavController, public navParams: NavParams, private eliteApi : EliteApi) { } ionViewDidLoad(){ this.eliteApi.getTournaments().then(data => this.tournaments = data); console.log("Loaded Successfully"); } itemTapped($event, tourney){ this.navCtrl.push(TeamsPage, tourney); } }