Async data from service to Component-(return data from http POST)

Question

I have used a http POST request to send data to the backend and save the data, also returned a certain element called receiptNo from the backend.

Now I have the receiptNo in the service but I am unable to send it to the component that is calling the service(couldn't get the hang of the async data that is being sent to the component from the service)

getting the following error at the subscribe present in the component:

Property 'subscribe' does not exist on type 'boolean'.

my Component:

   import { Component, NgZone,OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Printer, PrintOptions, Toast } from 'ionic-native';
import {LoanService} from '../../app/services/loan.service';
import {CollectionService} from '../../app/services//CollectionService';
import { CollectpaymentsPage } from '../collection/collection.component';
import { Collection}  from '../../../../common/classes/Collection';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';



@Component({
  selector: 'page-receipt',
  templateUrl: 'receipt.html'
})
export class ReceiptPage {

  base64Image: any;
  public loan: Dictionary;
  public mobile: any;
  // public form: any;
  public amount: any;
  public collection: Collection;
  public data;
  public res;

  constructor(public navCtrl: NavController,public collectionService: CollectionService, public zone: NgZone, public params: NavParams) { 
      this.loan = params.get('loan');
      this.mobile= params.get(this.mobile);
      // this.form= params.get('form');
      this.amount= params.get('amount');
      this.collection = params.get('collectionData');


   }


   ngOnInit() {
        console.log("this is receipt collectionss page")
        console.log(this.collection)
        console.log("from receipt ts")

         // XXX check for return value and errors
          // this.collectionService.saveCollection( this.collection);

          this.collectionService.saveCollection( this.collection)
                .subscribe(result => this.data = result);
}
}
interface Dictionary {
    [ index: string ]: string
}

my service(collectionService):

public saveCollection(  collection: Collection) {
        console.log("Collections Form data ")
        let queryParameters = new URLSearchParams();
        let headerParams = new Headers({ 'Content-Type': 'application/json' });
       var userToken = JSON.parse(localStorage.getItem('currentUser'));
       queryParameters.set('token', userToken.token );

        let requestOptions: RequestOptionsArgs = {
            method: 'POST',
            headers: headerParams,
            search: queryParameters
        };


        console.log( collection)
        var result = collection.validate()
        console.log( result)

       if( ! result["isValid"] ){
            console.log( result["message"])
            return false;

         }


        const url = this.basePath + '/api/v1/collection';

        let headers = new Headers({ 'Content-Type': 'application/json' });
         this.http.post(url, collection , requestOptions)
            .subscribe((response: Response) => {
                console.log(response);
                let receiptNo = response.json().receiptNo;
                console.log("this is return valuevalue")
                console.log(receiptNo);
                if(receiptNo){
                    console.log("tihis is return value");
                    console.log(receiptNo)
                    return response.json();

                }
                else{
                    console.log("failedfaileffailefailed")
                    return undefined;
                }
            });



    }

update your post with the component's code. oninit method alone is not enough to debug your problem. — Aravind
– Aravind, Commented Mar 4, 2017 at 9:43

looffee · Accepted Answer · 2017-03-04 10:35:41Z

2

ok, it's because returned Subscription, try to use Promise

public saveCollection(  collection: Collection): Promise<any> {
    // code
    return return this.http.post(url, collection , requestOptions)
        .toPromise()
        .then((success: Response) => {
            return 'success'
         }, (fail: any) => {
            return 'fail'
         })

this.collectionService.saveCollection( this.collection)
.then(success => console.log(success), // 'success'
    fail => console.log(fail)) /// 'fail'`

edited Mar 4, 2017 at 10:35

answered Mar 4, 2017 at 9:44

looffee

811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hemanth koganti Over a year ago

the error on the subscribe is gone now ...but a new error shows up saying-Cannot read property 'subscribe' of undefined

hemanth koganti Over a year ago

hey got my problem solved..... but can you explain me what exactly happened

Roman C · Accepted Answer · 2017-03-04 12:17:16Z

0

You have used .subscribe() on the function that returns a boolean value, but it should be Observable.

This code doesn't work

this.collectionService.saveCollection( this.collection)
            .subscribe(result => this.data = result);

answered Mar 4, 2017 at 12:17

Roman C

1

Collectives™ on Stack Overflow

Async data from service to Component-(return data from http POST)

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related