Creating a custom property in TypeScript and implementing it with an anonymous object: A step-by-step guide

Question

Creating a custom property in TypeScript and implementing it with an anonymous object: A step-by-step guide

I have implemented a custom getDate() method in my Angular component

getDate(date: Date){
    return date.format("dd-MMMM-yyyy HH:mm").toString();
}

I am retrieving string JSON data from the database in the following format:

`

 "{"field":"date","oldValue":"Mon Mar 25 00:00:00 GMT 2019","newValue":"Tue Mar 26 00:00:00 GMT 2019"},  {"field":"techniqueType","oldValue":"Intra","newValue":"Intralesional"}

`

The getList method in my code looks like this:

    getList(patientId?: number, pageNo?: number) {
       const auditTrailSubscription = 
         this._auditTrailService.getAuditTrailUrl(patientId, pageNo, 
         GridConfig.ITEMS_PER_PAGE)
          .subscribe(
            result => {
            try {
              this.results = [];
              this.totalItems = result.recordsCount;
              this.auditTrailList = result.lstRecords;
              this.auditTrailList.forEach(x => {
              let jschanges = JSON.parse(`[${x.jsonChanges}]`);
              jschanges.forEach(z => {
                this.results.push({
                  userName: x.userName,
                  timestamp: x.timestamp,
                  entityName: x.entityName,
                  field: z.field,
                  oldValue: z.oldValue instanceof Date ? 
                        this.getDate(z.oldValue) : z.oldValue,
                  newValue: z.newValue instanceof Date ? 
                     this.getDate(z.newValue) : z.newValue
                });
              });
            });
          } catch (e) {
            console.log(e);
          }
        },
        err => {
          this.handleError(err);
        }
      );

    this.addSubscription("auditTrail", auditTrailSubscription);
  }

Html file

    <tr *ngFor="let at of results | paginate: { itemsPerPage: 
         _ITEMS_PER_PAGE, currentPage: crtPage, totalItems: totalItems }"
        [attr.data-row-id]="at.userId">
        <td>{{ at.userName }}</td>
        <td>{{ at.timestamp ? (at.timestamp | date: 
        AUDIT_TRAIL_DATE_TIME_FORMAT  ) :  'Unknown' }}</td>
        <td>{{ at.entityName }}</td>
        <td>{{ at.field | titlecase  }}</td>
        <td>{{ at.oldValue }}</td>
        <td>{{ at.newValue }}</td>
      </tr>

In order to handle different types for `oldValue` and `newValue`, I utilize my custom getDate() method to ensure proper formatting.

javascript angular typescript

Answer 1

Answer №1

When working with the Angular HttpClient in your AuditTrailService, it's recommended to create a specific interface for handling JSON HTTP responses. You could define something like this:

interface AuditTrailResponse {
    recordsCount: number;
    lstRecords: AuditTrailRecord[];
}

Then, when making a request in your AuditTrailService, use the following syntax:

this.httpClient.get<AuditTrailResponse>('the/url/of/your/endpoint', { your: params })

By doing this, the variable result will be of type AuditTrailResponse, providing more clarity compared to using any.

I'm not entirely clear on the part where you're converting an interpolated string to JSON. From what I know, JSON.parse() doesn't return Date objects, so the check for oldValue instanceof Date further down shouldn't return true.

However, you can define another interface like this:

interface JSChange {
    userName: string;
    timestamp: number;
    entityName: string;
    oldValue: string | Date;
    newValue: string | Date;
}

If you're confident that your z argument follows this structure, consider casting it to this interface for better type safety.

Answer 2

When working with the Angular HttpClient in your AuditTrailService, it's recommended to create a specific interface for handling JSON HTTP responses. You could define something like this:

interface AuditTrailResponse {
    recordsCount: number;
    lstRecords: AuditTrailRecord[];
}

Then, when making a request in your AuditTrailService, use the following syntax:

this.httpClient.get<AuditTrailResponse>('the/url/of/your/endpoint', { your: params })

By doing this, the variable result will be of type AuditTrailResponse, providing more clarity compared to using any.

I'm not entirely clear on the part where you're converting an interpolated string to JSON. From what I know, JSON.parse() doesn't return Date objects, so the check for oldValue instanceof Date further down shouldn't return true.

However, you can define another interface like this:

interface JSChange {
    userName: string;
    timestamp: number;
    entityName: string;
    oldValue: string | Date;
    newValue: string | Date;
}

If you're confident that your z argument follows this structure, consider casting it to this interface for better type safety.

Answer 3

Answer №2

One way to determine if a date string is valid is to use the Date.parse() method. Simply pass your date string into Date.parse() and check if it returns a number. Here's an example:

if(isNaN(Date.parse("Tue Mar 26 00:00:00 GMT 2019"))){
     console.log("Invalid Date");
}
else {
    console.log("Valid Date")
}

Another approach

var isDateValue =  (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));

Give it a try and let me know how it goes!

Answer 4

One way to determine if a date string is valid is to use the Date.parse() method. Simply pass your date string into Date.parse() and check if it returns a number. Here's an example:

if(isNaN(Date.parse("Tue Mar 26 00:00:00 GMT 2019"))){
     console.log("Invalid Date");
}
else {
    console.log("Valid Date")
}

Another approach

var isDateValue =  (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));

Give it a try and let me know how it goes!

Creating a custom property in TypeScript and implementing it with an anonymous object: A step-by-step guide

Answer №1

Answer №2

Similar questions

Ways to update the hidden field's value within a foreach loop when the change event occurs?

When dynamically accessed, the property of a JSON object is considered "undefined"

Is it possible to utilize Angular's structural directives within the innerHtml?

Allow users to zoom in and out on a specific section of the website similar to how it works on Google Maps

Modifying the Trim Function in AngularJS

Is it possible to override values set in the constructor(props) in React? If not, what is the best way to set defaults that can be overwritten later?

Angular styling for input elements that are in the pristine state

What is the best way to link my PHP variable to a JavaScript variable within a While loop?

I am looking for a string with this particular format in JavaScript

Trigger the C# Click event with JavaScript fire function

Transform straightforward JavaScript code into jQuery

When Angular 14 application is opened for the first time, the 404 Error Page will automatically appear

Looping Angular Components are executed

Expanding application size by incorporating third-party libraries in NPM and JavaScript

JavaScript Array data value

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

Overlaying a div on top of an iframe

Issue encountered: Nuxt 3 fails to locate the useRoute import

What are the steps for applying logic based on the types of keys and values in a Map<K,V>?

Angular 2, Utilizing Enum Events