Unable to get Interval data correctly using Angular 2+

Question

Here I am displaying the dynamic data on the table and table will be generated based on the multi drop down selection. If I choose the first drop down option based on that of the second drop down option will be generated and based on this a table will be generated. Every 30 seconds I want to refresh the table/update the tables data previous I used setInterval():

return Observable.interval(30000).flatMap(()=>{ 
  return this.http.get(url + data+'/userid='+ param).map(res => { 
     return res.json(); 
  }); 
)};

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap`;

This above code is working fine but the issue here is even though I select a value in the second drop down it is displaying the previous values and all the drop down values. Also suppose in the drop down I have 1,2,3 in drop down, if 2 is selected it is refreshing 2 for every 30 seconds along with that of 1 and 3. They are also refreshing and I am getting values of them also.

Answer 1

You have a given very little information. But i think question can be constructed by it. Some things will be here and there. It answers your question

Things you should know about

1. Subject: A observable object which can also emit by calling onNext(...) on it.
2. switchMap: Map to observable, complete previous inner observable, emit values.

Creating two subject.These emits values when user select any options.

let firstValue$ = new Subject();
function on1stDropdownChanged(newFirstValue) {
    firstValue$.next(newFirstValue);
}
let secondValue$ = new Subject();
function on2ndDropdownChanged(newSecondValue) {
    secondValue$.next(newSecondValue);
}

This return required data based on values passed

function getUserData(firstValue, secondValue): Observable<UserData[]> {
    //how ever you want to handle these.
    if (firstValue == undefined || secondValue == undefined)
    return Observable.of([]); //empty results
    return ....
}

This return required 2nd dropdown options based on first value passed.

function getSecondValues(firstValue): Observable<SecondValue[]> {
    //how ever you want to handle these.
    if (firstValue == undefined) 
    return Observable.of([]); //empty results
    return ....
}

Now you need two type of events.

1. When 2nd dropdown is selected.
2. Fetch values when dropdown changes and then every 30 sec passed

We will create a observable which emits when 1st and 2nd value are selected. Some thing may change.

let when2ndSelected = firstValue$.switchMap( //When 1st selected, wait for below 
    firstValue =>
        getSecondValues(firstValue) // get second options based on first.
            .do(secondValues=>...) // whatever you want to do with these
            .switchMap(_ => secondValue$) // wait for 2nd selection by user
            .map(secondValue=>[firstValue,secondValue]) // map to first second array
)

Now we will do the user fetching

let timer = Observable.timer(0, 30000) // emit at 0,30,60sec ... 
let finalData$ = when2ndSelected
    .switchMap(firstSecondValue =>
        timer.switchMap(_time => getUserData(firstSecondValue[0], firstSecondValue[1])) //fetches new request at every 30 seconds.
    )

These is approach to the problem. You need tweek it to fit exactly your purpose. But I don't think it should fail.