Reputation: 307
I have an oberservable, which is an array:
items$: Observable<CarClassification[]>;
And I am trying to translate/convert this into a new Observable of an array of SelectItems for a dropdown box.
get SelectItems(): Observable<SelectItem[]> { ...
Which I can then set as the datasource for the dropdown box, and, if any item in items$ is modified, deleted or a new one added, the array of SelectItems changes as wel. The issue I am having is that I have dozens of these arrays (criteria for a larger object) that need to be defined in this way. Everything I have tried to date, if it works, is just too slow (subscribing to the observable and pushing to a new array) and I am looking for a more seamless way.
I'm new to RxJS, and I have tried a few different things, but none seem to work. I've search as much StackOverflow as I think I ever have.
CarClassification has two properties, Id and Name that I want to make the value and label of the SelectItem.
I know I can map the observable to an array:
items$.map((items) => { ...
But how to then properly iterate over each item in items, and return a new SelectItem for each has been eluding me.
Upvotes: 1
Views: 726
Reputation: 96889
If you have an Observable that emits arrays you can always unpack it with concatAll()
and then pack it again like for example this:
Observable.of([{...}, {...}, {...}])
.concatAll() // unpack
// will emit each {...} as a single value
.toArray() // pack
But you don't need to use Rx to transform the array at all:
items$.map((items: CarClassification[]) => {
return items.map((item: CarClassification) => new SelectItem(...));
});
Now you have Observable<SelectItem[]>
.
Upvotes: 3