Observable function return value from then method

How-to Discussions
1

Hi guys , i’m looking a way to return a value from a then method with an observable function , or assign a value

function cardForm(id, brand, last4, expmonth, expyear, name){
  var self = this;
  this.id = id;
  this.brand = brand;
  this.last4 = "**** **** ****" + " " + last4;
  this.expmonth = expmonth;
  this.expyear = expyear;
  this.name = name;
  this.monthYear = expmonth + " " + "/" + " " + expyear
  var bool = Observable(false)
  this.DefaultCard = Observable(function(){
    loadCustomer().then(function(results){
      if(results.default_source == id){
      return  bool.value = true
      }else {
      return  bool.value = false
      }
    })
  })

}


function loadAllCard(){
  Parse.Cloud.run("LoadAllCard", {customer:  Parse.User.current().get("customerID")}).then(function(results){
    CardLoading.value = false
    cards.refreshAll(results.data.map(function(x){
      return new cardForm(x.id, x.brand, x.last4, x.exp_month, x.exp_year, x.name)
    })
    )
  })
}

function loadCustomer(){
  return new Promise(function(resolve ,reject){
    Parse.Cloud.run("loadCustomer", {customer: Parse.User.current().get("customerID")}).then(function(results) {
      resolve(results)
    })
  })
}

I’m loading some credit cards using the function loadAllCard , but i also need with to load the customer data , to see if the card that i’m loading its equal to the customer default card , so inside ma cardForm i’m calling the loadCustomer function to compare.
comparison goes well , but when i assign the value to bool , it doesn’t work , when i return the value too.
can anyone helps me figure out , how can i do

2

Hi there! The way you’re using Observable function isn’t quite correct. Lets take a look at it:

this.DefaultCard = Observable(function(){
    loadCustomer().then(function(results){
		if(results.default_source == id){
			return  bool.value = true;
		}else {
			return  bool.value = false;
		}
    });
});

In your case, you’re not actually returning anything inside the observable function; you’re returning values inside the promise.
I would try a slightly different approach with this. Instead just return an empty Observable, and fill it in the promise handler as soon as you get your data:

function cardForm(id, brand, last4, expmonth, expyear, name){
	var self = this;

	this.DefaultCard = Observable();

	loadCustomer().then(function(results){
		if(results.default_source == id){
			self.DefaultCard.value = true;
		}else {
			self.DefaultCard.value = false;
		}
    });
}

I hope this was the right interpretation of your problem :slight_smile: Let me know if it works out.

3

Works like a charm, many thanks Kristian

4

Good to hear :)s

5

Please i have a similar problem. all i want to do is to return the value of the array that comes from the subscription in getData function. for some reason, return keyword dosent work

import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ReportsService {
  user: String;
  constructor(private authService: AuthService) { }
  getData() {
    this.authService.getSales().subscribe(d => {
      this.user = d.data;
    }, error => console.log(`error is ${error}`), this.hh.bind(this));
    return this.user
  }
  hh() {
    return this.user
  }
}
6

A couple things @ayotycoon:

I haven’t used angular stuff with Fuse before, so there could be things I’m missing, but there are a couple things that I suspect could be wrong here:

Are you trying to data-bind to getData()? If so, then you should make that a property (get getData()).

Also, if this.authService.getSales() is asynchronous, then you can’t be certain this.user has been updated at the point where you return it. I would split up the call to authService from the getData property here.

Of none of this works, i would need more information to be of any help.

7

Thanks for replying;
I just want to return the result of the subscription (which is an array) to the getData function.

i have a component which depends on the return value of the getData method to function

import { ReportsService } from './../../../../../../services/reports.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-cardyesterday',
  templateUrl: './cardyesterday.component.html',
  styleUrls: ['./cardyesterday.component.css']
})
export class CardyesterdayComponent implements OnInit {
  salesCounter: any;
  amountCounter: any;
  changeCounter: any;
  changePeople: any;
  constructor(private report: ReportsService) { }

  ngOnInit() {
    const d = this.report.getData();
  }


}

here is the service i posted earlier

i mport { AuthService } from ‘./auth.service’;
import { Injectable } from ‘@angular/core’;

@Injectable({ 
    providedIn: 'root' 
}) 
export class ReportsService { 
    user: String; 
    constructor(private authService: AuthService) { } 
    getData() { 
        this.authService.getSales().subscribe(d => { 
            this.user = d.data; 
        }, 
        error => console.log(`error is ${error}`), 
        this.hh.bind(this)); 
        return this.user 
    } 

    hh() { 
        return this.user 
    } 
}

so i know this.authService.getSales() is asynchronous but how do i return its result after this.authService.getSales() is done fetching the data (which is supposed to be an array). i need the result to be returned to the getData method so i can use it in the component.