What is a typical data transformation pattern used in TypeScript and Angular 2?

Question

What is a typical data transformation pattern used in TypeScript and Angular 2?

Developing an Angular 2+ application using TypeScript.

I've been structuring objects for storage in a data source, including helper methods within them. I have successfully saved these objects. ORIGINAL CLASS DESIGN EXAMPLE

export class Order {
    readonly orderNumber: string;
    amount: number;
    shortCode: string;
    readonly dateCreated: string;

    constructor(){
        this.orderNumber = cuid();
        this.dateCreated = moment().format();
    }

    incrementAmount(): void {
        this.amount += 1;
    }

RESULTED OBJECT:

{ 
  amount: 74.22,
  dateCreated: '2017-04-03T21:23:49-04:00',
  orderNumber: 'cj12v2rf50000zoguviraoik9',
  shortCode: 'SJLLDE' 
}

However, upon retrieval, the objects are not in their original form. It seems counterintuitive to manually extract and rebuild objects field by field. Instead, working with one known object might be more efficient for type usage and enhanced functionality.

Is it common practice in this ecosystem to transform returned data from services back into original objects?

If so, are there any resources available that discuss common approaches for achieving this?

javascript angular typescript

Answer 1

Answer №1

When data is returned from the backend, it's essential to convert it from a JSON object into the appropriate model object.

Here's my typical approach:

let item: Item = new Item(itemJsonObject);

To achieve this, you'll need to modify your constructor as follows:

export class Item {
    readonly itemCode: string;
    price: number;
    category: string;
    readonly dateAdded: string;

    constructor(data){
        if(data !== null) {
          this.itemCode = data.itemCode;
          this.price = data.price;
          this.category = data.category;
          this.dateAdded = data.dateAdded;
        } else {
          this.itemCode = generateId();
          this.dateAdded = moment().format();
        }
    }
}

This methodology has been effective for me thus far. Best of luck!

Answer 2

When data is returned from the backend, it's essential to convert it from a JSON object into the appropriate model object.

Here's my typical approach:

let item: Item = new Item(itemJsonObject);

To achieve this, you'll need to modify your constructor as follows:

export class Item {
    readonly itemCode: string;
    price: number;
    category: string;
    readonly dateAdded: string;

    constructor(data){
        if(data !== null) {
          this.itemCode = data.itemCode;
          this.price = data.price;
          this.category = data.category;
          this.dateAdded = data.dateAdded;
        } else {
          this.itemCode = generateId();
          this.dateAdded = moment().format();
        }
    }
}

This methodology has been effective for me thus far. Best of luck!

Answer 3

Answer №2

If you're looking for a reliable solution to parse JSON data, consider utilizing the third-party library called "ta-json." You can find more information about it here: https://www.npmjs.com/package/ta-json.

import { JSON, JsonObject, JsonProperty } from "ta-json";
@JsonObject()
export class Purchase {
  @JsonProperty()
  readonly purchaseCode: string;
  @JsonProperty()
  amount: number;
  @JsonProperty()
  productCode: string;
  @JsonProperty()
  readonly dateOrdered: string;

  constructor() {
    this.purchaseCode = generateCode();
    this.dateOrdered = getFormattedDate();
  }

  increaseAmount(): void {
    this.amount += 1;
  }
}

let purchase = new Purchase();
console.log(purchase.amount);
let dataToSave = JSON.stringify(order);

let parsedData = JSON.parse<Purchase>(dataToSave);
parsedData.increaseAmount();
console.log(parsedData.amount);

Answer 4

If you're looking for a reliable solution to parse JSON data, consider utilizing the third-party library called "ta-json." You can find more information about it here: https://www.npmjs.com/package/ta-json.

import { JSON, JsonObject, JsonProperty } from "ta-json";
@JsonObject()
export class Purchase {
  @JsonProperty()
  readonly purchaseCode: string;
  @JsonProperty()
  amount: number;
  @JsonProperty()
  productCode: string;
  @JsonProperty()
  readonly dateOrdered: string;

  constructor() {
    this.purchaseCode = generateCode();
    this.dateOrdered = getFormattedDate();
  }

  increaseAmount(): void {
    this.amount += 1;
  }
}

let purchase = new Purchase();
console.log(purchase.amount);
let dataToSave = JSON.stringify(order);

let parsedData = JSON.parse<Purchase>(dataToSave);
parsedData.increaseAmount();
console.log(parsedData.amount);

What is a typical data transformation pattern used in TypeScript and Angular 2?

Answer №1

Answer №2

Similar questions

Can you share any recommendations or instances of modifying data within HTML tables using Laravel?

Struggling with TypeScript compilation in a Vue.js project? Encounter error code TS2352

Angular - Using HttpClient for handling POST requests

What is the best way to showcase JSON keys in Vue.js?

Attempting to integrate a chatroom name entered by the user using a combination of Ajax and Python

Original: Placeholder Text With $scope.Array and HTML DIVRewritten: Text

Merging distinct objects/values in AngularJS/Javascript to create a straightforward list

The process of upgrading all dependencies to a particular version

Using a loop to draw lines on a canvas

Using JavaScript to submit the value of a checkbox

"Navigating through events with confidence: the power of event

Which specific technological platform or framework would be most suitable for constructing a similar project?

Is there a way to translate IBM floating point data into JavaScript numbers?

Tips for enabling the `ignoreUndefinedProperties` feature in Node.js

The act of looping with for loops can be quite disruptive to

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Can the optionsText be shown while saving the optionsValue in a dropdown menu?

Is it possible to utilize ag-grid's API to filter multiple checkbox values simultaneously?

Organizing a Javascript project for development and production with the help of npm and grunt

Issue encountered while attempting to install datagrid library with Nuxt3