Question

这些是输入观察值：

items$ = of([
  {name: 'John', age: 30, job: 'Dentist', address: {street: 'Maple (6,103)', country: 'US'},
  {name: 'Mark', age: 34, job: 'Driver', address: {street: 'Pine (6,170)', country: 'US'}},
  {name: 'Johannes', age: 25, job: 'Mechanic', address: {street: 'Elm (5,233)', country: 'US'}},
  {name: 'Thjoma', age: 28, job: 'Coder', address: {street: 'Lake (4,901)', country: 'US'}},
])

fields$ = of([
  name, age, street
])

如何将上述可观察字段映射到每个项目的新对象并返回新数组？

预期结果：

of([
  {name: 'John', age: 30, job: 'Dentist', street: 'Maple (6,103)'},
  {name: 'Mark', age: 34, job: 'Driver', street: 'Pine (6,170)'},
  {name: 'Johannes', age: 25, job: 'Mechanic', street: 'Elm (5,233)'},
  {name: 'Thjoma', age: 28, job: 'Coder', street: 'Lake (4,901)'},
])

请参阅内部项目（街道）的映射/展平以获取每个项目的新对象。

我已经尝试过类似的方法：但这不起作用。

    return combineLatest(
      this.items$,
      this.fields$,
      (items, fields) => ({ items, fields })
    ).pipe(
      map(({ items, fields }) =>
        fields.reduce(
          (acc, cur) => ({ ...acc, [cur]: items.map((item) => item[cur]) }),
          {}
        )
      )
    );

有人可以帮忙吗？

看到了

只有可观察字段$中的字段出现在结果可观察字段中。其他省略。

Answer 1

类似的方法可以起作用：StackBlitz

const $specifiedFieldsOnly = combineLatest(this.items$, this.fields$).pipe(
  map(([items, fields]) => 
    items.map(item => (
      fields.reduce((obj, field) => ({ ...obj, [field]:item[field] }), {}))
    )
  )
);

当然，它仅适用于源数据中存在的字段名称。在您的情况下，street将不起作用，因为您的对象没有street属性。您想挖掘出address.street属性，因此需要做一些工作才能使它起作用。

如果您想用点号指定字段名称以表示嵌套的属性（例如address.street），则可以这样做：StackBlitz

const fields$ = of([
  'name', 'age', 'address.street', 'address.country'
]);

const $specifiedFieldsOnly = combineLatest(this.items$, this.fields$).pipe(
  map(([items, fields]) => 
    items.map(item => (
      fields.reduce((obj, path) => {
        const field = path.split('.').reduce(
          (acc, cur, i) => { 
            const name = cur;
            const value = (i === 0) ? item[cur] : acc.value[cur];

            return { name, value };
          },
          { name: undefined, value: undefined }
        );

        return { ...obj, [field.name]: field.value };

      }, {}))
    )
  )
);

注意：如果您担心重复的字段名称，则需要做一些详细说明。

如何将两个可观察项转换为具有两个初始可观察值的映射值的另一个可观察对象？

1 个答案: