Modify api response in service of angular

Question

I am trying to modify the response return by API request. Right now I am getting the response as

[
   {
       name: "Afghanistan"
   }, 
   {
       name: "Åland Islands"
   }
]

I want to modify it to:

[
   {
        name: "Afghanistan",
        name1: "Afghanistan",
        name2: "Afghanistan"
    },
    {
        name: "Åland Islands",
        name1: "Åland Islands",
        name2: "Åland Islands"
    }
]

I am trying to copy name field and create new fields eg: name1, name2 in same object . Here is working project https://stackblitz.com/edit/angular-8bzcdp can any one help

What have you tried so far?

Brandon Taylor
– Brandon Taylor

2019-07-30 17:47:56 +00:00
Commented Jul 30, 2019 at 17:47 — Brandon Taylor
– Brandon Taylor, Commented Jul 30, 2019 at 17:47
I have tried the code which is given at a link above

Raman
– Raman

2019-07-30 17:49:39 +00:00
Commented Jul 30, 2019 at 17:49 — Raman
– Raman, Commented Jul 30, 2019 at 17:49
data.map(({ name }) => ({ name, name1: name, name2: name })

MoxxiManagarm
– MoxxiManagarm

2019-07-30 17:54:37 +00:00
Commented Jul 30, 2019 at 17:54 — MoxxiManagarm
– MoxxiManagarm, Commented Jul 30, 2019 at 17:54
thanks @MoxxiManagarm

Raman
– Raman

2019-07-30 18:03:33 +00:00
Commented Jul 30, 2019 at 18:03 — Raman
– Raman, Commented Jul 30, 2019 at 18:03

Nicholas K · Accepted Answer · 2019-07-30 17:54:13Z

6

You can change your method to:

  getRecords() {
    return this.http.get('https://restcountries.eu/rest/v2/all').pipe(
      map((res: any[]) => {
        const data = res.map(obj => ({
          name: obj.name,
          name1: obj.name,
          name2: obj.name
        }));
        return data;
      })
    );
  }

Here on the resulting response array (res[]) we map each element into a json object based on your criteria and return the newly created json object.

edited Jul 30, 2019 at 17:54

answered Jul 30, 2019 at 17:52

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

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

Comments

user8509567 · Accepted Answer · 2019-07-30 18:19:11Z

0

You can modify your response after you subscribe

this.service.getRecords().subscribe(res => {
  console.log(res);
  console.log(res.reduce((a, c) => Object.assign(a, c), {}));
});

for details please visit the updated stackblitz link

https://stackblitz.com/edit/angular-nwwef1?file=src/app/app.component.ts

answered Jul 30, 2019 at 18:19

user8509567

1

Collectives™ on Stack Overflow

Modify api response in service of angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related