How to conditionally get data from 2 streams with rxjs - rxjs

Question

I am combining two streams of data:
The first stream is an array of programs that are returned from an endpoint.
The second stream is from our state, which is an array of program IDs (what programs are selected).
The problem I am facing is that if the selections stream updates, it automatically re-runs the first stream causing excessive HTTP requests upon each selection change.
I only want getPrograms to run initially, to get program data. But I want the selections stream to stay open, so we can get the latest changes from the state.
What operator can i use to achieve this?
this.filteredPrograms$ = combineLatest([this.getPrograms(), this.selectedProgramIdsState$]).pipe(
map((combined) => {
const programs = combined[0];
const selections = combined[1];
return programs.map((program: ProgramSearchResultModel) => {
if (program && program.programNumber) {
program['checked'] = selections.includes(program.programNumber);
}
this.dashboardService.resetPagination = false;
return program;
});
})
);
getPrograms() returns an observable of programs[]
selectedProgramIdsState$ returns an observable of string[]

Answer 1

I think what you need is the withLatestFrom operator.
Assuming you have the following streams:
programs$ which emits an HTTP response
selection$ which emits every time a user click on a checkbox
Then selection$.pipe(withLatestFrom(programs$)) emits an array of the latest values emitted by each stream when selection$ emits:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.2.0/rxjs.umd.min.js" integrity="sha512-MlqMFvHwgWJ1vfts5fdC2WzxDaIXWfYuAd9Tb2lobtF61Gk+HIRDrbtxgasBSM9lZgOK9ilwK9LqFIYEV+k0IA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<fieldset>
<legend>Avail. programs</legend>
<input type="checkbox" id="prog1"/> prog. 1
<input type="checkbox" id="prog2"/> prog. 2
<input type="checkbox" id="prog3"/> prog. 3
<input type="checkbox" id="prog4"/> prog. 4
<input type="checkbox" id="prog5"/> prog. 5
</fieldset>
<p></p>
<script>
const {timer, of, fromEvent} = rxjs;
const {tap, switchMapTo, map, withLatestFrom, scan} = rxjs.operators;
const init$ = timer(2000);
// Simulate a delay between an HTTP request and its response.
const programs$ =
timer(500).pipe(
tap(() => console.log('requesting programs… ✓')),
switchMapTo(of({ prog1: 'Natural Language Processing'
, prog2: 'Machine learning'
, prog3: 'Computational geometry'
, prog4: 'Computational linguistics'
, prog5: 'Formal methods'})));
const selection$ =
fromEvent(document.querySelector('fieldset'), 'input').pipe(
map(({target: {id, checked}}) => ({id, checked})),
scan((acc, {id, checked}) => ({...acc, [id]: checked}), {}),
withLatestFrom(programs$));
selection$.subscribe(([sels, programs]) => {
document.querySelector('p').textContent =
Object.entries(sels)
.filter(([, checked]) => checked)
.map(([id]) => programs[id])
.join(', ');
});
</script>