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

Question

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.

martin · Accepted Answer · 2017-03-09 21:54:20Z

3

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[]>.

answered Mar 9, 2017 at 21:54

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related