Parse JSON Strings as JavaScript Date Objects

Introduction

These days, developers tend to store and transmit massive amounts of data using JSON, which could also include dates. In order to properly use them, these strings then need to be parsed as JS Date objects. But how do we go about doing that? That's exactly what we'll be exploring in this Byte.

JSON and Dates in JavaScript

JSON is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. It's a common data format with diverse uses in data storing and transmitting.

On the other hand, the Date object is a datatype built into the JavaScript language. Date objects are created with the new Date( ) constructor. Despite JavaScript's many strengths, it has always had a bit of difficulty with dates and times (hence the many datetime libraries, like moment and dayjs).

So, what happens when you need to handle dates from a JSON string in JavaScript? Well, the JSON format only supports a small number of basic data types: objects, arrays, numbers, strings, booleans, and null. JSON does not have a built-in Date type. Instead, dates in JSON are typically represented as strings.

If you haven't done this before, it might seem complicated at first, but parsing JSON dates in JavaScript is straightforward once you know how to do it.

How to Parse JSON Dates in JavaScript

There are several ways to parse JSON dates in JavaScript. We're going to explore two methods: using the Date() constructor and the Date.parse() method. In this Byte, we'll focus on using the Date() constructor.

Using the Date() Constructor

The Date() constructor in JavaScript creates a new date object with a specified date and time. When you pass a string to the Date() constructor, it tries to parse that string into a date.

Here's a simple example:

let jsonString = '{"dateOfBirth": "2023-09-26T00:00:00.000Z"}';
let obj = JSON.parse(jsonString);
let date = new Date(obj.dateOfBirth);

console.log(date);
// Output: 2023-09-26T00:00:00.000Z

Here we first parse the JSON string into a JavaScript object using the JSON.parse() method. Then, we use the Date() constructor to parse the dateOfBirth property into a JavaScript Date object.

Note: The Date() constructor accepts date strings in several formats, including ISO 8601, which is the format used in our example. ISO 8601 dates are in the format "YYYY-MM-DDTHH:mm:ss.sssZ", where "Z" represents Coordinated Universal Time (UTC).

Using the Date.parse() Method

The Date.parse() method in JavaScript is another way to parse JSON dates. It works by converting a date string into the number of milliseconds since January 1, 1970, 00:00:00 UTC. This can then be used to create a new date object. In this example we'll also show how to use the JSON.parse method to immediately convert the date string to an object using the reviver callback.

let jsonDate = '{"date":"2023-09-26T12:00:00Z"}';
let parsedDate = JSON.parse(jsonDate, function(key, value) {
    if (key == 'date') return new Date(Date.parse(value));
    return value;
});
console.log(parsedDate.date);  // Outputs: 2023-09-26T12:00:00.000Z

In this code snippet, we use Date.parse() within the JSON.parse() method. The Date.parse() method returns the number of milliseconds since the Unix Epoch, which we then pass to the Date constructor to create a new date object.

The Date.parse method is helpful when you want to convert the date to a Unix timestamp as an intermediary, which can be better for storage and sometimes for date manipulations as well, depending on your use-case.

Handling Errors During Parsing

While parsing JSON dates, it's common to encounter errors due to incorrect date formats. To handle this, we'd usually use JavaScript's built-in try...catch statement, but the Date object doesn't throw errors in these cases, but instead it returns Invalid Date, which we'll need to check for:

let jsonDate = '{"date":"2023-13-01T12:00:00Z"}'; // Invalid month

let parsedDate = JSON.parse(jsonDate, function(key, value) {
    if (key == 'date') return new Date(value);
    return value;
});

let d = parsedDate.date;
if (d instanceof Date && !isNaN(d)) {
    console.log(d);
} else {
    console.log('Invalid date!');
}

Here we use the following code to check if our date is valid or not:

d instanceof Date && !isNaN(d)

An Invalid Date will return true for d instanceof Date, but since !isNaN(d) will return false, the overall statement becomes false, and thus it is not a valid date.

Other Ways to Parse JSON Dates

While the Date() constructor and Date.parse() method are the most straightforward ways to parse JSON dates in JavaScript, there are alternative solutions available. One such solution is using a third party library like Moment.js.

let moment = require('moment');
let jsonDate = '{"date":"2023-09-26T12:00:00Z"}';

let parsedDate = JSON.parse(jsonDate, function(key, value) {
    if (key == 'date') return moment(value).toDate();
    return value;
});

console.log(parsedDate.date);  // Outputs: 2023-09-26T12:00:00.000Z

We use the moment() function from the Moment.js library to parse the date string. This approach can be particularly useful when dealing with complex date and time formats, especially custom formats that don't adhere to any standard.

Note: While Moment.js is a powerful library, it may be overkill if you only need to parse simple date strings. Always consider your specific needs before adding external dependencies to your project. For example, the library dayjs is much more lightweight and has a similar syntax as Moment, although it can take a bit more setup to get certain features working.

Conclusion

In this Byte, we've looked into different methods of parsing JSON dates in JavaScript, including the Date() constructor, Date.parse() method, and even an external library like Moment.js. We've also discussed how to handle errors that might occur during parsing. As always, the best approach depends on your specific needs and the complexity of the date strings you're dealing with.