Greg Kopp
Greg Kopp

Reputation: 307

RxJS - Translating Observable of an Array to a new Observable of an Array

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

Answers (1)

martin
martin

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

Related Questions