Tranform Data Using Map Operator in RxJS

Question

I have one third Party API which returns data as below - It has been called from Angular Service using HttpClient.

const someObject = {

    employees:[   

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

I want to transform this data into below structure where name, age are as it is and description will be calculated based on name and age

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

Above structure will be typed to some Interface and this is ultimately returned from my Angular service

How can I do this using RxJS ?

Can anybody please help me as I am struggling with it

Ultimately , my Angular service will return data as above structure ?

EDIT :

Based on responses got , I tried below :

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

But when this Observable is subscribed , I am getting value as undefined.

Is it because the second map operator map(employees is not returning anything ? How can I make it return object constructed from inner map ?

Have you tried using pipe and then map operator to create new object containing description along with other fields? — shaktimaan
– shaktimaan, Commented Nov 20, 2019 at 10:49

Maciej Wojcik · Accepted Answer · 2019-11-20 10:51:16Z

1

so basically you want to add and process additional property:

assume this is the method in your service:

getData(){...}

Then you can simply do that:

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

then in employees$ you have the observable with employees with the structure you want

answered Nov 20, 2019 at 10:51

Maciej Wojcik

2,1712 gold badges30 silver badges49 bronze badges

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

4 Comments

Saurabh Yadav Over a year ago

seems it will {...employee, description}; not work

Atul Over a year ago

In addition there is one more problem . I have edited the question . Can you take a look ?

Maciej Wojcik Over a year ago

yea - there should be return added:

Maciej Wojcik Over a year ago

return values.map(employee =>{

Saurabh Yadav · Accepted Answer · 2019-11-20 11:06:23Z

1

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

answered Nov 20, 2019 at 11:06

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

Comments

Paulo Pereira · Accepted Answer · 2019-11-20 10:58:45Z

0

You can try something like this

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

Now just change the string in the description. Hope I helped

answered Nov 20, 2019 at 10:58

Paulo Pereira

2111 silver badge8 bronze badges

Collectives™ on Stack Overflow

Tranform Data Using Map Operator in RxJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related