I have a large array of different objects. They are strings and they e 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?

I have a large array of different objects. They are strings and they e 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?

• javascript
• typescript

3 Answers 3

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);

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);
    }
}

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

EDIT

import pipes:

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

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