Property ‘pipe’ does not exist on type ‘Promise

Issue

I am trying to retrieve a list of products via a http call and then pipe and map the result before returning it to the subscribed function. I am using the ionic cordova advanced http plugin for ssl pinnign and making my requests. When i try to pipe the result of the request I get the error;

Property ‘pipe’ does not exist on type ‘Promise’

Any ideas how to get around this?

import {Injectable} from '@angular/core';
import {environment} from '../environments/environment';
import {HttpClient, HttpHeaders, HttpResponse} from '@angular/common/http';
import { Observable, of, pipe, Observer } from 'rxjs';
import {AuthenticationService} from './authentication.service';
import 'rxjs/add/operator/map'
import { HTTP } from '@ionic-native/http/ngx';
import {map, startWith} from "rxjs/operators";

const ENDPOINT_URL  environment.endpointURL;
const CK  environment.consumerKey;
const CS  environment.consumerSecret;
@Injectable({
  providedIn: 'root'
})
export class PricesService {
  products: any;
  private user: any;
  items: any[]  [];
  page  1;
  api_query  '';
  totalProducts  1;

  providers: [
    HTTP // <-- List providers here
  ]

  constructor(
    public http: HTTP,
    public authenticationService: AuthenticationService
  ) { }


  getPrices(selectedQuantity): Observable<[]> {
    this.api_query  ENDPOINT_URL + 'wc/v3/product?tag' + selectedQuantity + '?consumer_key' + CK + '&consumer_secret' + CS
    return this.http.get(this.api_query, '','').pipe(
      map(resp > {
        let data  resp['body'];

        // for (let post of data) {
        //   post.media_url  post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
        // }
        return data;
      })
    );
  }

}


import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import {PricesService} from '../prices.service';
import {AuthenticationService} from '../authentication.service';

@Component({
  selector: 'app-compare',
  templateUrl: './compare.page.html',
  styleUrls: ['./compare.page.scss'],
})
export class ComparePage implements OnInit {
  items: any[];

  constructor(
    public authenticationService: AuthenticationService,
    public alertCtrl: AlertController,
    public pricesService: PricesService
  ) { }

  ngOnInit() {
  }

  getPrices(selectedValue) {
    console.log("NEWLY SELECTD VALUE: "+selectedValue);
    //const user  this.authenticationService.getUser();
    console.log('Getting prices');
    this.pricesService.getPrices(selectedValue)
      .subscribe((data: any[]) > {
        this.items  data;
      });
  }
}

Solution

An enhancement to @Rohit Sharma’s answer:

I will suggest that you wrap the from call with the defer operator. This will make the observable “lazy” so that the underlying request is only made once you subscribe.

import { from, defer } from 'rxjs';


return defer(() > from(this.http.get(this.api_query, '','')))
  .pipe(
    map(resp > // return something)
  );

Answered By – C_Ogoo

Leave a Comment