在 RxJS 中使用 Map 运算符转换数据

Question

我有一个第三方 API，return 的数据如下 - 它已从 Angular 服务使用 HttpClient.

调用

const someObject = {

    employees:[   

        {name:"XYZ",age:30},
        {name:"ABC",age:28},
    ]
}

我想将此数据转换为以下结构 姓名、年龄原样，描述将根据姓名和年龄计算

{ 
  name : 
  age  : 
  description: //calculate based on name and age 
},
{ 
  name : 
  age  : 
  description:  //calculate based on name and age 
}

上面的结构将被输入到一些 Interface 中，这最终是 return 从我的 Angular service

编辑的

如何使用 RxJS 执行此操作？

任何人都可以帮助我，因为我正在努力解决这个问题

最终，我的 Angular 服务会 return 数据如上结构？

编辑：

根据收到的回复，我尝试了以下操作：

return this.http.get<any>(url).pipe(
            map(data => data.employees),
            map(employees =>{
              values.map(employee =>{
                console.log('individual value =',employee);
                return{
                  employee,
                  description:employee.name + "" + employee.age 
                }
              })          
            })
        )

但是当这个 Observable 被订阅时，我得到的值是 undefined。

是否因为第二个地图运算符 map(employees 没有 returning 任何东西？我怎样才能使它成为 return 由 inner map 构造的对象？

Answer 1

所以基本上你想添加和处理额外的属性:

假设这是您服务中的方法：

getData(){...}

那么你可以简单地这样做：

const employees$ = this.service.getData().pipe(
  map(data => data.employees),
  map(employees => employees.map(employee => {
       const description = `My name is ${employee.name}`;
       return {...employee, description};
    }
  )
);

然后在 employees$ 中，您可以观察到具有您想要的结构的员工

Answer 2

你可以试试这样的

of([
        {name:"XYZ",age:30},
        {name:"ABC",age:28},
    ]).pipe(
    map(employees => 
      employees.map(
        elem => {return {
          "name": elem.name,
          "age": elem.age,
          "description": 'blablabla'
        }}
      )
    )
  ).subscribe(employees => console.log(employees))

现在只需更改描述中的字符串即可。希望我能帮到你

Answer 3

    const someObject = {
    
        employees:[   
            {name:"XYZ",age:30},
            {name:"ABC",age:28},
        ]
    }
    
    
    let description = 'description goes here';
    let result = someObject.employees.map( o => { return  {...o, ...{description} } });
    console.log(result);

在 RxJS 中使用 Map 运算符转换数据

Tranform Data Using Map Operator in RxJS

angular

rxjs6