How to properly format a date object in Angular

Question

How to properly format a date object in Angular

After making a get request, I received JSON data in the following format:

{
"name" : "cow",
"date" : {
    "year" : 2012,
    "month" : "JANUARY",
    "dayOfMonth" : 1,
    "dayOfWeek" : "FRIDAY",
    "dayOfYear" : 1,
    "monthValue" : 1,
    "hour" : 2,
    "minute" : 2,
    "second" : 0,
    "nano" : 0,
    "chronology" : {
      "id" : "ISO",
      "calendarType" : "iso8601"
    }
  }
....
}

I want to convert the above JSON object into the following format using TypeScript/Angular:

{
"name" : "cow",
"date" : "2012-01-01"
}

Once converted, I need to store it in an array defined below.

//....correctFormat = [];
service.convertStore()
  .subscribe((data: any) => {
    // perform necessary manipulations here

    correctFormat = "holds the final result"
})

angular typescript

Answer 1

Answer №1

Extract the details for each member, create a new object for it, and add it to an array:

const obj = {
  "name": "dog",
  "date": {
    "year": 2015,
    "month": "APRIL",
    "dayOfMonth": 15,
    "dayOfWeek": "WEDNESDAY",
    "dayOfYear": 105,
    "monthValue": 4,
    "hour": 12,
    "minute": 45,
    "second": 30,
    "nano": 500,
    "chronology": {
      "id": "ISO",
      "calendarType": "iso8601"
    }
  }
}

const dateDetails = obj.date;
formattedData = [];
formattedData.push({
  name: obj.name,
  date: dateDetails.year + '-' + (0 + '' + dateDetails.monthValue).slice(-2) + '-' + (0 + '' + dateDetails.dayOfMonth).slice(-2)
});

console.log(formattedData)

Answer 2

Extract the details for each member, create a new object for it, and add it to an array:

const obj = {
  "name": "dog",
  "date": {
    "year": 2015,
    "month": "APRIL",
    "dayOfMonth": 15,
    "dayOfWeek": "WEDNESDAY",
    "dayOfYear": 105,
    "monthValue": 4,
    "hour": 12,
    "minute": 45,
    "second": 30,
    "nano": 500,
    "chronology": {
      "id": "ISO",
      "calendarType": "iso8601"
    }
  }
}

const dateDetails = obj.date;
formattedData = [];
formattedData.push({
  name: obj.name,
  date: dateDetails.year + '-' + (0 + '' + dateDetails.monthValue).slice(-2) + '-' + (0 + '' + dateDetails.dayOfMonth).slice(-2)
});

console.log(formattedData)

Answer 3

Answer №2

If you want to define a custom class in Angular, you can follow these steps:

export class CustomClass {
   title: string;
   description: string;

   constructor(title: string, description: string) {
       this.title = title;
       this.description = description;
   }
}

Next, when invoking a service, use the following code snippet:

service.fetchData()
  .subscribe((response: any) => {
    // perform operations here
    const newData = new CustomClass(response['title'], `${response['date']['year']}-${response['date']['monthValue']}-${response['date']['dayOfMonth']}`);
    updatedData = "store the modified data"
})

Answer 4

If you want to define a custom class in Angular, you can follow these steps:

export class CustomClass {
   title: string;
   description: string;

   constructor(title: string, description: string) {
       this.title = title;
       this.description = description;
   }
}

Next, when invoking a service, use the following code snippet:

service.fetchData()
  .subscribe((response: any) => {
    // perform operations here
    const newData = new CustomClass(response['title'], `${response['date']['year']}-${response['date']['monthValue']}-${response['date']['dayOfMonth']}`);
    updatedData = "store the modified data"
})

How to properly format a date object in Angular

Answer №1

Answer №2

Similar questions

Encountering a TypeError in Angular FormControl Jest test: Circular structure being converted to JSON issue

Error: Serialization of circular structure to JSON not possible in Next.js

Route.get() is expecting a callback function, however it received an object of undefined instead

What is the process for transferring a Pulumi Output<T> to the container definition of a task in ECS?

Utilize Angular Service Worker to prefetch API data efficiently (dataGroups)

Discovering the ultimate guide to utilizing the ANT Design Menu.Item and Upload components side by side

I encountered numerous type errors while working on a React Native project that utilizes TypeScript

Issue with subscribing to nested observables, unable to successfully unsubscribe

Extend the row of the table according to the drop-down menu choice

Troubleshooting issue: Angular 7 form template not resetting with form.reset()

Leveraging characteristics of combined types

Having trouble determining whether a modal is currently open in an Angular application?

Fetching Unicode block specials using axios in getStaticProps with Next.js

Node.js does not allow the extension of the Promise object due to the absence of a base constructor with the required number of type

Can more than one label be assigned to a single bar in a Google column chart?

Connecting JavaScript files in angular 4: A step-by-step guide

How can the encapsulation parameter in Angular 2's component section be utilized effectively?

Surprising Logging Quirks in Angular

Hosting asynchronous bindings in Angular 2

What is the best way to integrate JSON:API with Angular and RxJs?