Verify whether the data within the array is a string or a date, and convert it as needed

Question

Verify whether the data within the array is a string or a date, and convert it as needed

I am trying to determine the data type (string or date) of the values coming from a loop in a p-table

There is a key called newValue which can have two possible values: newValue: "Percentage" or

newValue: "2021-03-25T15:55:42.136Z"

If the value is a date, I want to display it as "3/25/21, 9:25 PM" otherwise just show the string "Percentage"

 <td style="width: 10%;">
        {{rowData?.histories.newValue ? getDateorStringValue(rowData?.histories.newValue) : 'N/A'}}
      </td>
    getDateorStringValue(...)

This function is what I'm using, any suggestions on how to achieve this?

angular typescript momentjs

Answer 1

Answer №1

One option is to create a simple pipe for the comparison.

date-or-string.pipe.ts

import { Inject, LOCALE_ID, Pipe, PipeTransform } from "@angular/core";
import { DatePipe } from "@angular/common";

export const checkIfDate = (date: string) => {
  return !!Date.parse(date);
};

@Pipe({
  name: "dateOrString"
})
export class DateOrStringPipe extends DatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(
    value: any,
    format?: string,
    timezone?: string,
    locale?: string
  ): any {
    return checkIfDate(value)
      ? super.transform(value, format, timezone, locale)
      : value;
  }
}

Usage

<td style="width: 10%;">
  {{ rowData.histories.newValue | dateOrString:'M/dd/yy, h:mm a'}}
</td>

It is important to note that using Date.parse() for comparison may only work with strings. There are more effective ways to compare, as explained here.

See a working example here: Stackblitz

Answer 2

One option is to create a simple pipe for the comparison.

date-or-string.pipe.ts

import { Inject, LOCALE_ID, Pipe, PipeTransform } from "@angular/core";
import { DatePipe } from "@angular/common";

export const checkIfDate = (date: string) => {
  return !!Date.parse(date);
};

@Pipe({
  name: "dateOrString"
})
export class DateOrStringPipe extends DatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(
    value: any,
    format?: string,
    timezone?: string,
    locale?: string
  ): any {
    return checkIfDate(value)
      ? super.transform(value, format, timezone, locale)
      : value;
  }
}

Usage

<td style="width: 10%;">
  {{ rowData.histories.newValue | dateOrString:'M/dd/yy, h:mm a'}}
</td>

It is important to note that using Date.parse() for comparison may only work with strings. There are more effective ways to compare, as explained here.

See a working example here: Stackblitz

Verify whether the data within the array is a string or a date, and convert it as needed

Answer №1

Similar questions

Error: Unable to access the property 'firstname' of an undefined variable

The PrimeNg datatable fails to update and display the latest data

Angular TypeScript Directive Link function not being executed

Generating lazy-loaded Angular modules using AOT in Ionic-app-scripts with webpack

Why is the text returned by the Angular Response body missing the JSON brackets? Strange, isn't it

Learn how to incorporate internationalization (i18n) in Angular 4 with this detailed example

Angular 7's StyleUrl that Adapts to Your Needs

Make sure the subset interface is selected from the interface / Choose PickDeep<>?

transferring information between two sibling elements in Angular 7

Creating a reusable API call function with the fetch method

Learn how to effectively utilize the onload event in Angular 2 when working with dynamically inserted image sources

Angular's Route Guard feature is programmed to redirect users to the home page every time before they

CORS policy does not recognize the specific methods I specified in Express Gateway

I'm having trouble grasping the issue: TypeError: Unable to access the 'subscribe' property of an undefined object

The proper method for specifying contextType in NexusJS when integrating with NextJS

In Angular, there is a situation where two input fields are both referencing the same event.target

Navigating images within Typescript - NextJS operations

Ways to remove modules from an Angular build process?

Error: Unable to locate module with associated type definitions when utilizing Typescript in Next.js

Sort the array by the elements in a separate array