Typescript convert object string to date format mm/dd/yyyy

Question

I have a large array of different objects. They are strings and they come in from the api looking as so

const data =   [
      {
        id: 1,
        fruit: “apple”,
        createdOn: "2016-09-02T23:00:00.000Z",
        submittedDate: "2016-09-11T23:00:00.000Z”
      },
      {
        id: 2,
        fruit: “banana”,
        createdOn: "2016-09-11T23:00:00.000Z”,
        submittedDate: "2016-09-11T23:00:00.000Z”
      },
      {
        id: 3,
        fruit: “cherry”,
        createdOn: "2016-09-13T23:00:00.000Z",
        submittedDate: "2016-09-11T23:00:00.000Z”

      },
    ]
 this.gridData = data

I assign this object array to a grid that parses out the data. Before I send it to the grid how can I convert these string dates to the format mm/dd/yyyy?

EDIT: So I could have an array of data that has datefields that are created dynamically. Currently in my example I gave you the date field names(createdOn, submittedDate), however I could have an array where I do not know what the field names are.

We do have a way that we can identify these fields as our naming convention requires all date fields to end with "Dt". So since I know a field will be a date based on the string of "Dt" how can I changed the data dynamically?

Answer 1

 const data = [{ id: 1, fruit: "apple", createdOn: "2016-09-02T23:00:00.000Z", submittedDate: "2016-09-11T23:00:00.000Z" }, { id: 2, fruit: "banana", createdOn: "2016-09-11T23:00:00.000Z", submittedDate: "2016-09-11T23:00:00.000Z" }, { id: 3, fruit: "cherry", createdOn: "2016-09-13T23:00:00.000Z", submittedDate: "2016-09-11T23:00:00.000Z" }, ]; const dataWithDT = [{ id: 1, fruit: "apple", createdDt: "2016-09-02T23:00:00.000Z", submittedDt: "2016-09-11T23:00:00.000Z" }, { id: 2, fruit: "banana", createdDt: "2016-09-11T23:00:00.000Z", submittedDt: "2016-09-11T23:00:00.000Z" }, { id: 3, fruit: "cherry", createdDt: "2016-09-13T23:00:00.000Z", submittedDt: "2016-09-11T23:00:00.000Z" }, ]; function getMMDDYYYY(date) { var today = new Date(date); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear(); if (dd < 10) dd = '0' + dd if (mm < 10) mm = '0' + mm return mm + '/' + dd + '/' + yyyy; } const formatData = data.map(val => { val.createdOn = getMMDDYYYY(val.createdOn); val.submittedDate = getMMDDYYYY(val.submittedDate); return val; }) const formatDataWithDt = data.map(val => { for (var keys in val) { if (keys.includes("Dt")) { val[keys] = getMMDDYYYY(val.createdOn); val[keys] = getMMDDYYYY(val.submittedDate); } } return val; }) console.log(formatDataWithDt); 

Answer 2

For formating dates in Angular, you can use Date pipe .

EDIT

import pipes:

import { CurrencyPipe, DatePipe, DecimalPipe } from @angular/common';

set them in constructor:

constructor(        
        private _curency: CurrencyPipe,
        private _decimal: DecimalPipe,
        private _date: DatePipe,
    ) { }

call them in code:

let amount = this._decimal.transform(this.invoice.amount, '1.2-2');

before: 100 , after 100.00

let date = this._date.transform(this.invocie.date, 'dd.MM.yyyy HH:mm:ss')

before: 2016-09-11T23:00:00.000Z after: 11.06.2016 23:00:00

Answer 3

My method was basically to splice everything together to create any type of format that you wanted. I would go with a custom pipe in angular though that way you could use it anywhere in your app without having to worry about creating a service to house the method. That way in your html you could have something like:

<p>Here's my date data {{ data.date | myCustomPipe}}</p>

At any rate, my solution is as follows although I like the mapping idea a lot more:

 const data = [ { id: 1, fruit: 'apple', createdOn: "2016-09-02T23:00:00.000Z", submittedDate: "2016-09-11T23:00:00.000Z" }, { id: 2, fruit: 'banana', createdOn: "2016-09-11T23:00:00.000Z", submittedDate: "2016-09-11T23:00:00.000Z" }, { id: 3, fruit: 'cherry', createdOn: "2016-09-13T23:00:00.000Z", submittedDate: "2016-09-11T23:00:00.000Z" }, ] this.gridData = data; changeDateFormat(this.gridData); printContents(); function changeDateFormat(dataChanging) { for(let someData of dataChanging) { let year = someData.createdOn.slice(0,4); let month = someData.createdOn.slice(5,7); let day = someData.createdOn.slice(8,10); someData.createdOn = year + '/' + month + '/' + day; } } function printContents() { for(let someData of this.gridData) { console.log(someData.createdOn); } }