Angular2 - Cancel flow: Observable -> debounceTime -> mergeMap -> subscribe

0
votes

How can I cancel

Observable -> debounceTime -> mergeMap -> subscribe

flow in mergeMap method?

I want to achieve something like that:

    var request = this.listPartners.filterChange.asObservable()
        .debounceTime(300)
        .mergeMap(value =>
        {
            if (value != "")
                return this.partnersService.list({ filter: value }) //call http get
            return null;
        });
    if (request)
        request.subscribe(partners => this.partners = partners);

But I get error:

EXCEPTION: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

I understand that mergeMap must return Observable, Array ..., but I do not want to make request to the server if value == "". How?

Edited:

My first code was (without return null):

    var request = this.listPartners.filterChange.asObservable()
        .debounceTime(300)
        .mergeMap(value =>
        {
            if (value != "")
                return this.partnersService.list({ filter: value })
        });
    if (request)
        request.subscribe(partners => this.partners = partners);

which is the same as call return; but exception is the same, if I call return null, return; or nothing.

Edited for Jai asnwer: 

    var request = this.listPartners.filterChange.asObservable()
        .debounceTime(300)
        .mergeMap(value =>
        {
            if (value != "")
                return this.partnersService.list({ filter: value })
            return;
        });
    console.log("request", request);        //this is not called if (value == "")
    if (request)
        request.subscribe(partners => this.partners = partners);
3
angular

3 Answers

1
votes

You can filter it 

var request = this.listPartners.filterChange.asObservable()
        .debounceTime(300)
        .filter((value)=> value!='') /// will stop the rest if the value is ''
        .mergeMap(value =>
        {
            if (value != "")
                return this.partnersService.list({ filter: value }) //call http get
            return null;
        });
    if (request)
        request.subscribe(partners => this.partners = partners);
1
votes

just return; instead of returning null: 

// return null;
return;

You can return an Observable with some propery as currently you are doing and check if that property is not blank: 

var request = this.listPartners.filterChange.asObservable()
  .debounceTime(300)
  .mergeMap(value => this.partnersService.list({filter: value }));

if (request.filter !== "")
  request.subscribe(partners => this.partners = partners);
0
votes

you can't return null in mergeMap function.

Just return; 

var request = this.listPartners.filterChange.asObservable()
    .debounceTime(300)
    .mergeMap(value =>
    {
        if (value != "")
            return this.partnersService.list({ filter: value }) //call http get
        return;
    });
if (request)
    request.subscribe(partners => this.partners = partners);