The traditional Angular model definition has been revamped with the implementation of web services model

Question

The traditional Angular model definition has been revamped with the implementation of web services model

I have a TypeScript model that looks like this:

import * as moment from 'moment';

export class Activity {
  public id: number;      
  public activityDate: string;      
  public day: number = moment(this.activityDate).dayOfYear();
}

Also, a C# model is sent by WebApi in this format:

public class Activity
{     
    [JsonProperty("id")]
    public int Id { get; set; }

    [JsonProperty("activityDate")]
    public DateTime ActivityDate { get; set; }
}

There is a mapping using a simple response.json() in my service class.

My concern is that the property day disappears from my model.ts.

Is there a way to declare something to maintain integrity in the TypeScript model? Or any binding on model retrieval keep the structure intact?

angular typescript asp.net-web-api

Answer 1

Answer №1

In order to map the response.json() call, you must explicitly define the day property as it will not be calculated automatically. Here is a suggestion to achieve this:

export interface Activity {
  id: number;
  activityDate: string;
  day?: number;
}
export const mapActivityFromServer(d => ({
  ...d,
  day: moment(d.activityDate).dayOfYear()
}));

Answer 2

In order to map the response.json() call, you must explicitly define the day property as it will not be calculated automatically. Here is a suggestion to achieve this:

export interface Activity {
  id: number;
  activityDate: string;
  day?: number;
}
export const mapActivityFromServer(d => ({
  ...d,
  day: moment(d.activityDate).dayOfYear()
}));

The traditional Angular model definition has been revamped with the implementation of web services model

Answer №1

Similar questions

Enter data into a form control to update the browser URL

Employing square bracket notation based on the input data

Mastering the incorporation of Context in React with Typescript

Tips for customizing colors for dynamically added bars in an Angular bar chart

TypeScript/Javascript - Error: The specified function is not callable

Is Axios the sole option for API calls when utilizing Next.js with SSG and SSR?

Using the up and down arrow keys on the keyboard to navigate through a mat-form-field-infix field in

Tips for bringing in an enum from TypeScript?

Having trouble getting @types/express-session to function properly. Any suggestions on how to fix it?

Troubleshooting TypeScript errors in a personalized Material UI 5 theme

Ensure that the interface limits the key value to match precisely the value of a constant in Typescript

Encountering a 403 error with RXJS when attempting to subscribe to a websocket in Angular

What is the best approach for setting up a global pipe that can be utilized across various modules?

difficulties arise when trying to use ngOnChanges to update an array

Hold off on utilizing information from a single observable until a later time

implementing an event listener in vanilla JavaScript with TypeScript

Ways to broaden the type signature of a Typescript comparator in order to facilitate sorting by properties nested within objects?

What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

The UI elements are failing to reflect the changes in the data

Retrieving Data from Vuetify Component within vue 3