Массив карт RxJS с другими наблюдаемыми и возвращаемым массивом

Question

У меня есть массив опций, поступающих с сервера

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'},
];

, мне нужно сопоставить каждый элемент массива с переводом на основе его key и вернуть массив переведенных опций

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'},
];

Мне удалось сделать это, используя from(options), но он явно выделяет каждый элемент массива отдельно - вместо этого мне нужен полный массив.В приведенном ниже коде я пытаюсь заархивировать все переводы, но я получаю массив только переведенных строк - как мне отобразить их обратно в каждую 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);

здесь я создал игровую площадкуна стеке

Answer 1

Вы можете сопоставить каждую опцию с Наблюдаемой и затем форкнуть их всех:

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

Answer 2

Используйте распространение и отдых (...), чтобы собрать, а затем распространить остальную часть объекта:

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