Enhance the API response for Angular service purposes

Question

Enhance the API response for Angular service purposes

I am currently working on modifying the response returned by an API request. At the moment, I receive the response as:

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

My goal is to adjust it to:

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

I am attempting to duplicate the 'name' field and create new fields such as 'name1', 'name2' within the same object. Here is a functional project https://stackblitz.com/edit/angular-8bzcdp. Can anyone provide assistance?

angular typescript rxjs

Answer 1

Answer №1

If you want to update your approach, consider modifying your method like so:

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

In this solution, each element in the resultant response array (res[]) is transformed into a JSON object according to your specifications before being returned as the newly created JSON object.

Answer 2

If you want to update your approach, consider modifying your method like so:

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

In this solution, each element in the resultant response array (res[]) is transformed into a JSON object according to your specifications before being returned as the newly created JSON object.

Answer 3

Answer №2

Make changes to your response once you have subscribed

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

To learn more, check out the latest stackblitz link provided below

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

Answer 4

Make changes to your response once you have subscribed

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

To learn more, check out the latest stackblitz link provided below

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

Enhance the API response for Angular service purposes

Answer №1

Answer №2

Similar questions

Troubleshooting native web worker issues in Angular 11 - Addressing the Element Bug

Angular is unable to bind with 'dragula' because it does not recognize it as a valid property of 'ul'

Leverage the power of TypeScript with knockout's pureComputed function

Transform a protractor screenshot into a PDF file

Dealing with Angular can be frustrating at times, especially when you encounter errors like "TypeError: Cannot

Determining the appropriate version of the types package for your needs

How can I choose an option in a dropdown field labeled as ejs-dropdownlist with WebDriver in an Angular web application?

Returning a 'never' type from a function in React using Typescript

There seems to be a mismatch in this Typescript function overloading - None of the over

using angular and firestore to grant public reading permission for a document

Creating a feature that automatically determines the data type of a value using the provided key

Priority of Search Results in Ionic Search Bar

I'm having trouble getting any data to emit when I subscribe to a state service subject that stores a hovered element. What could I be missing?

Encountering dependency tree issues while trying to install @angular/material

Creating TypeScript object properties dynamically based on function arguments

Using React with TypeScript to ensure that at least one key of a type is not null, even if all keys are optional

What is the best way to extract and retrieve the most recent data from an XmlHttpRequest?

Determine the output of a function based on the structure of the input parameter by mapping through a complex nested object

Looking for a method to call a child component's function through a click event triggered from the parent component?

Angular - CSS Grid - Positioning columns based on their index values