RxJS map array with another observables and return array

Question

I have array of options that is coming from server

const options = [
  {key: 1, label: 'label1'},
  {key: 2, label: 'label2'},
  {key: 3, label: 'label3'},
  {key: 4, label: 'label4'},
  {key: 5, label: 'label5'},
  {key: 6, label: 'label6'},
];

what I need is to map each array item with translation based on its key and return array of translated options

const options = [
  {key: "key1", label: 'label1', translated: 'translation 1'},
  {key: "key2", label: 'label2', translated: 'translation 2'},
  {key: "key3", label: 'label3', translated: 'translation 3'},
  {key: "key4", label: 'label4', translated: 'translation 4'},
  {key: "key5", label: 'label5', translated: 'translation 5'},
  {key: "key6", label: 'label6', translated: 'translation 6'},
];

I managed to do this using from(options) but it obviously emits each member of array separatelly - I need full array instead. In the code below I'm tryingtried to zip all translations, but I receive array of translated strings only - how do I map them back into each option?

import { of, from, timer, zip } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';

const getTranslation = (key) => of('translation ' + key)

const options = [
  { key: "key1", label: 'label1' },
  { key: "key2", label: 'label2' },
  { key: "key3", label: 'label3' },
  { key: "key4", label: 'label4' },
  { key: "key5", label: 'label5' },
  { key: "key6", label: 'label6' },
];

of(options).pipe(
  mergeMap(options =>
    zip(...options.map(option =>
      getTranslation(option.key)))
  )).subscribe(console.log);

here I created playground on stackblitz

Mike Jerred · Accepted Answer · 2019-07-11 09:30:29Z

2

You could map each option to an Observable and then forkJoin them all:

forkJoin(options.map(options =>
  getTranslation(option.key).pipe(map(translation => ({
    ...option,
    translated: translation
  })))
)).subscribe(console.log);

answered Jul 11, 2019 at 9:30

Mike Jerred

10.7k5 gold badges25 silver badges48 bronze badges

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

1 Comment

godblessstrawberry Over a year ago

yeah this works even with mapMerge - the key to solving was passing getTranslation() result to pipe(map(translation => {...})), tyvm!

Jack Bashford · Accepted Answer · 2019-07-11 09:22:58Z

-1

Use spread and rest (...) to collect and then re-spread the rest of the object:

zip(...options.map(({ key, ...option }) => ({ ...option, key: getTranslation(key) })))

answered Jul 11, 2019 at 9:22

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

godblessstrawberry Over a year ago

this will pass multiple {...option, key: getTranslatedKey()} objects while zip expects multiple Observables as input

Collectives™ on Stack Overflow

RxJS map array with another observables and return array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related