With the limited information provided, it seems like a question can be formulated from it. Some elements will need to be adjusted accordingly to provide an answer.
Key Points to Understand:
- Subject: An observable object that can emit by using
onNext(...).
- switchMap: Mapping to an observable, completing the previous inner observable, and emitting values.
The process involves creating two subjects that emit values when users select options.
let firstValue$ = new Subject();
function on1stDropdownChanged(newFirstValue) {
firstValue$.next(newFirstValue);
}
let secondValue$ = new Subject();
function on2ndDropdownChanged(newSecondValue) {
secondValue$.next(newSecondValue);
}
A function is implemented to return necessary data based on the passed values:
function getUserData(firstValue, secondValue): Observable<UserData[]> {
//Handle cases as needed.
if (firstValue == undefined || secondValue == undefined)
return Observable.of([]); //return empty results
return ....
}
Another function returns second dropdown options based on the first value passed:
function getSecondValues(firstValue): Observable<SecondValue[]> {
//Handle cases as needed.
if (firstValue == undefined)
return Observable.of([]); //return empty results
return ....
}
Two types of events are required:
- Selection of the 2nd dropdown.
- Fetching values when dropdown changes, then every 30 seconds thereafter.
An observable is created to emit when both the 1st and 2nd values are selected, followed by some adjustments:
let when2ndSelected = firstValue$.switchMap( //When 1st selected, wait for below
firstValue =>
getSecondValues(firstValue) // get second options based on first.
.do(secondValues=>...) //Action with second values
.switchMap(_ => secondValue$) // Wait for 2nd selection
.map(secondValue=>[firstValue,secondValue]) // map to array of first and second values
)
Subsequently, user fetching logic is implemented:
let timer = Observable.timer(0, 30000) // emit at 0,30,60sec ...
let finalData$ = when2ndSelected
.switchMap(firstSecondValue =>
timer.switchMap(_time => getUserData(firstSecondValue[0], firstSecondValue[1])) //fetch new request every 30 seconds
)
This serves as an approach to the problem, which may require customization based on specific needs. However, the overall functionality should remain intact.