CODEWITHSUNDEEP
javascriptangulartypescriptsortingdatetime
Tom Rudge
Tom Rudge

Reputation: 3272

Transform an array of date object properties with typeScript

My array of data has a date field that is currently not readable to a pipe that I am trying to create. Therefore I am trying to convert the date to a format before it gets to my pipe. I already have a filter in my components constructor that orders by date field. After this I want to then convert the date to this format and give me a new array.

0: {dateTime: "2018-09-22T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
1: {dateTime: "2019-09-08T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
2: {dateTime: "2019-09-09T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
3: {dateTime: "2019-09-10T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
4: {dateTime: "2019-09-11T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}

The above is after its been sorted in date order... I want something like this:

0: {dateTime: "22-09-2018", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
1: {dateTime: "21-09-2018", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
2: {dateTime: "20-09-2018", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
3: {dateTime: "19-09-2018", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}
4: {dateTime: "18-09-2018", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam."}

Here is my constructor, you will see the order filter pipe here and after that I am trying to transform the new array to an even newer one for me to use.

  constructor(private contactLogService: ContactLogService, private orderPipe: OrderPipe, private datePipe: DatePipe) {
    this.sortedCollection = orderPipe.transform(this.contactLogService.contactLog, 'dateTime');
    this.formattedDateCollection = datePipe.transform(this.sortedCollection.dateTime, 'yyyy-dd-MM'); // new line
    console.log("contact log sorted", this.sortedCollection);
    console.log("Formatted Date", this.formattedDateCollection);
  }

With the above .sateTime does not exist on type 'any' - below are my decalarations

contactLog: any;
sortedCollection: any[] = [];
formattedDateCollection: any; //new

Upvotes: 1

Views: 153

Answers (2)

StepUp
StepUp

Reputation: 38134

It can be done through vanilla JavaScript:

fooFunction(keyVal) {
    const grades = [
        { dateTime: "2018-09-22T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam." }
        , { dateTime: "2019-09-08T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam." }
        , { dateTime: "2019-09-09T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam." }
        , { dateTime: "2019-09-10T10:17:12.162Z", notes: "Lorem ipsum dolor sit amet, quo ei simul congue ex…oluptua dignissim per, habeo iusto primis ea eam." }
        , { dateTime: "2019-09-11T10:17:12.162Z" }
    ];

    let desiredData= grades.map(g => {
        return {
            dateTime: this.transformDate(g.dateTime),
            notes: g.notes
        };
    });
    console.log(desiredData);
}


transformDate(dateTime){
     return new Date(dateTime).toJSON().slice(0,10);
}

Upvotes: 1

Krishna Mohan
Krishna Mohan

Reputation: 1722

You can try the following code:

  this.formattedDateCollection = this.sortedCollection.map(x => {
      const y = Object.assign({}, x);
      y.dateTime = this.datePipe.transform(x.dateTime, "yyyy-dd-MM");
      return y;
    });

PS: If you've http calls to pull the data, it is better to move the logic from constructor to ngOnInit().

Upvotes: 1

Related Questions