Angular HttpClient mapping causes the removal of getters from the target object

Question

Angular HttpClient mapping causes the removal of getters from the target object

Utilizing the HttpClient to fetch Json data from an API, I am utilizing the autoMapping feature of the HttpClient to map the json response to a specified object in this manner:

this.httpClient.post<Person>(url, body, { headers: headers, params: httpParams }).retry(ConfigurationService.apiHttpRetries)

The issue arises with my Person class as it includes getters such as:

get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }

Following httpClient.Post, the resulting Person object only contains the fields returned from the json and does not include other properties or the FullName getter.

I attempted using Object.Assign but that did not resolve the issue...

What is the underlying functionality of the httpClient.post generic method if it does not perform mapping and simply returns JSON.parse(jsonResult)?

angular typescript

Answer 1

Answer №1

Using the generic argument serves the purpose of providing type information during compilation. By specifying that the object returned from the response will align with the Person structure, you are ensuring compatibility. However, if the response lacks essential properties such as firstName or lastName, your code may not function correctly unless you validate the object structure manually. If you wish for the object to include methods or additional getters, you will need to create an instance yourself.

interface PersonResponse {
  firstName: string;
  lastName: string;
}

this.httpClient.post<Person>(url, body, headers).pipe(
  retry(ConfigurationService.apiHttpRetries),
  map(personProperties => new Person(personProperties),
);

As illustrated in the following example:

class Person {
  constructor({ firstName, lastName }) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }
}

Answer 2

Using the generic argument serves the purpose of providing type information during compilation. By specifying that the object returned from the response will align with the Person structure, you are ensuring compatibility. However, if the response lacks essential properties such as firstName or lastName, your code may not function correctly unless you validate the object structure manually. If you wish for the object to include methods or additional getters, you will need to create an instance yourself.

interface PersonResponse {
  firstName: string;
  lastName: string;
}

this.httpClient.post<Person>(url, body, headers).pipe(
  retry(ConfigurationService.apiHttpRetries),
  map(personProperties => new Person(personProperties),
);

As illustrated in the following example:

class Person {
  constructor({ firstName, lastName }) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }
}

Answer 3

Answer №2

Using Object.assign() in the constructor of a class:

class Person {
     firstName: string;
     lastName: string;;
         constructor(data: Object|Person) {
            Object.assign(this,data);
         }
      get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }
    }

    ...

        this.httpClient.post<Person>(url, body, headers).pipe(
              retry(ConfigurationService.apiHttpRetries),
              map(personProperties => new Person(personProperties),
       );

Avoid manually mapping each property:

this.firstName = firstName;
this.lastName = lastName;

Answer 4

Using Object.assign() in the constructor of a class:

class Person {
     firstName: string;
     lastName: string;;
         constructor(data: Object|Person) {
            Object.assign(this,data);
         }
      get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }
    }

    ...

        this.httpClient.post<Person>(url, body, headers).pipe(
              retry(ConfigurationService.apiHttpRetries),
              map(personProperties => new Person(personProperties),
       );

Avoid manually mapping each property:

this.firstName = firstName;
this.lastName = lastName;

Angular HttpClient mapping causes the removal of getters from the target object

Answer №1

Answer №2

Similar questions

Explore the Attribute and generate a Text-Node using the Renderer

Differences between Typescript Import and JavaScript import

Obtaining the interface for a Typegoose class model

In order to address the issue of displaying a 404 error in In-Memory Angular,

A new interface property type that is customized based on the type property that is passed in

Using ngFor to iterate over a list of items in Angular and displaying them conditionally using ng

Struggling with Angular 5 Facebook authentication and attempting to successfully navigate to the main landing page

"Embracing the Power of Font Awesome 5 in Angular 5

How can I achieve the same functionality as C# LINQ's GroupBy in Typescript?

Traversing fields of a document within a Firestore collection using Angular

ConcatMap in RxJS processes only the last item in the queue

Design a model class containing two arrow functions stored in variables with a default value

Angular - Enhance User Experience with Persistent Autocomplete Suggestions Displayed

Retrieving the previous and current URL in Angular 8

Searching for values within an array of objects by iterating through nested arrays to apply a filter

Passing parameters in React classes is a crucial aspect of creating

Combining arrays of objects sharing a common key yet varying in structure

A guide on eliminating repetitions from an array of objects by utilizing the spread operator

What is the process for obtaining the complete URL using the getDownloadURL() function along with a token?

Filling MatTables using asynchronous rows and promises