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

【问题标题】：Tranform Data Using Map Operator in RxJS在 RxJS 中使用 Map 运算符转换数据
【发布时间】：2019-11-20 19:38:01
【问题描述】：

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

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，这最终从我的Angular service返回

如何使用 RxJS 做到这一点？

在我苦苦挣扎的时候，谁能帮帮我

最终，我的 Angular 服务会返回上述结构的数据吗？

编辑：

根据收到的回复，我尝试了以下方法：

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 没有返回任何东西？如何让它返回由 inner map 构造的对象？

【问题讨论】：

您是否尝试过使用pipe 然后map 运算符创建包含描述以及其他字段的新对象？

标签： angular rxjs6

【解决方案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$ 中，您可以观察到具有您想要的结构的员工

【讨论】：

似乎会 {...employee, description};不工作
另外还有一个问题。我已经编辑了这个问题。可以看看吗？
是的 - 应该添加返回：
返回值.map(employee =>{

【解决方案2】：

    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);

【讨论】：

【解决方案3】：

你可以试试这样的

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))

现在只需更改描述中的字符串。希望我有所帮助

【讨论】：