Transform the data received from the server into a TypeScript object

Question

Transform the data received from the server into a TypeScript object

I'm facing a challenge in converting an object retrieved from the server to a TypeScript class I've created.

While my TypeScript object has identical properties to the one returned by the server, the difference lies in the casing of the property names. The properties in my TypeScript class are camel cased, whereas those in the server's object are title cased. This mismatch causes issues when trying to access properties like userModel.isActive in my TypeScript code. Below is the API call return statement made by my provider.

return this.httpClient.post<UserModel>(url, { params: queryParams });

I have attempted:

this.userProvider.getUser(request).subscribe(modelReturnedFromApi => {
    Object.assign(this.myTypeScriptModel, modelReturnedFromApi)
    this.myTypeScriptModel = modelReturnedFromApi
    this.myTypeScriptModel = JSON.stringify(modelReturnedFromApi)
})

Could someone provide guidance on how to resolve this issue? Thank you in advance.

Update: It seems that there isn't a built-in solution for what I require, so I've decided to align the property names in my TypeScript class with those returned from the server. Appreciate all the support provided.

angular typescript

Answer 1

Answer №1

When the names of your properties are not identical, you might need to manually assign each property of myTypeScriptModel to the corresponding property in modeReturnedFromApi.

Answer 2

When the names of your properties are not identical, you might need to manually assign each property of myTypeScriptModel to the corresponding property in modeReturnedFromApi.

Answer 3

Answer №2

A method to convert title-cased properties to camel-cased properties would involve iterating through each property of the model returned from the API and assigning the value to a new property with the first letter in lowercase.

for (let property in apiModel) {
    myTypeScriptModel[property[0].toLowerCase() + property.substr(1)] = modelReturnedFromApi[property];
}

This approach is only suitable for handling properties at one level. For nested objects with title-case properties, a recursive function will be required. If you face difficulties implementing this solution, please provide an example input and I can modify the answer accordingly.

Answer 4

A method to convert title-cased properties to camel-cased properties would involve iterating through each property of the model returned from the API and assigning the value to a new property with the first letter in lowercase.

for (let property in apiModel) {
    myTypeScriptModel[property[0].toLowerCase() + property.substr(1)] = modelReturnedFromApi[property];
}

This approach is only suitable for handling properties at one level. For nested objects with title-case properties, a recursive function will be required. If you face difficulties implementing this solution, please provide an example input and I can modify the answer accordingly.

Answer 5

Answer №3

If you're expecting a specific response, consider creating a model class and using its constructor function to convert the data into camelCase format.

Person.ts

export class Person {
  firstName: string;
  lastName: string;

  constructor(person){
    this.firstName = person.Firstname;
    this.lastName = person.Lastname;
  }
}

app.component.ts

export class AppComponent implements OnInit {
  name = 'Angular';
  person: Person;

  // sample response for demonstration purposes
  response = {
    'Firstname' : 'John',
    'Lastname': 'Doe'
  }

  ngOnInit(){
    // converting response into a Person object
    this.person = new Person(this.response);
  }
}

You can check out this stackblitz for more details.

Answer 6

If you're expecting a specific response, consider creating a model class and using its constructor function to convert the data into camelCase format.

Person.ts

export class Person {
  firstName: string;
  lastName: string;

  constructor(person){
    this.firstName = person.Firstname;
    this.lastName = person.Lastname;
  }
}

app.component.ts

export class AppComponent implements OnInit {
  name = 'Angular';
  person: Person;

  // sample response for demonstration purposes
  response = {
    'Firstname' : 'John',
    'Lastname': 'Doe'
  }

  ngOnInit(){
    // converting response into a Person object
    this.person = new Person(this.response);
  }
}

You can check out this stackblitz for more details.

Transform the data received from the server into a TypeScript object

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

Utilizing React with .NET 8.0 and Minimal API, the front end is configured to send HTTP requests to its own specific port rather than the

Problems encountered with operating the Bootstrap burger menu

Enhancing the aesthetic appeal of Angular2 Google Maps

Creating a build task in Visual Studio Code with universal TypeScript compiler settings

Locate the minimum and maximum values between two inputted dates

The color scheme in Visual Studio 2019 for Angular and Typescript code is quite unappealing

forEach was unable to determine the appropriate data types

Transitioning menus in Ionic 2

An error was encountered while trying to use the 'export' token in lodash-es that was not

Unable to transmit props while employing Typescript in ReactJS

When RxJS returns an empty observable, it does not trigger the successful action

Adding local images to Excel can be easily accomplished using Office Scripts

Obtain characteristics of the primary element in Ionic version 2 or 3

The distribution of intersection types is not properly handled by Typescript's array.map function

Angular Pipe: Working with Data Structures in Angular With Nested Arrays and Objects

Apply a CSS class once a TypeScript function evaluates to true

The GIPHY API object returns no results

Customizing pressed row styles and properties within a map iteration in React Native

Is it possible to exclude a certain prop from a styled component that has emotions?