I am trying to deserialize a json object that has a javascript date in it. When JSON.stringify is called on the object, dates are serialized to strings that are not properly deserialized back to dates. I have attempted to deserialize the object using both the native browser implementation with chrome, IE, and FF and using jquery. Both give the some results. Here is the snippet:
var obj = {Date: new Date()};
var objSer = JSON.stringify(obj);
var objDeser = JSON.parse(objSer);
var objJqDeser = $.parseJSON(objSer);
function getYear(value){
try{
return value.getYear();
}
catch(err){
return err;
}
}
$("#orig").text("Orig Year: " + getYear(obj.Date));
$("#deser").text("Deser Year: " + getYear(objDeser.Date));
$("#jqDeser").text("JqDeser Year: " + getYear(objJqDeser.Date));
I want objDeser.Date to be a js date not a string. You can see this problem in action here: http://jsbin.com/unijud/24/edit. Is there any js libraries that can properly deserialize the dates when building the javascript object?
JSON.parse has a little-known second parameter: the 'reviver' function. This is used for precisely this purpose: to revive a date string into a Date object (or, hypothetically, any other kind of object you wanted to convert from string) during the initial parse.
There's an SO post about this, and here's a blog post that includes an implementation example and a function that will do property checking for a couple common date encodings (ISO & that weird .NET AJAX format), before parsing to a Date.
Here's the key function from that blog post, fwiw:
// JSON date deserializer
// use as the second, 'reviver' argument to JSON.parse();
if (window.JSON && !window.JSON.dateParser) {
var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
JSON.dateParser = function (key, value) {
// first, just make sure the property is a string:
if (typeof value === 'string') {
// then, use regex to see if it's an ISO-formatted string
var a = reISO.exec(value);
if (a) {
// if so, Date() can parse it:
return new Date(value);
}
// otherwise, see if it's a wacky Microsoft-format string:
a = reMsAjax.exec(value);
if (a) {
// and perform some jujitsu to make use of it:
var b = a[1].split(/[-+,.]/);
return new Date(b[0] ? +b[0] : 0 - +b[1]);
}
// here, you could insert any additional tests and parse instructions you like, for other date syntaxes...
}
// important: you need to return any values you're not parsing, or they die...
return value;
};
}
// use: JSON.parse(json,JSON.dateParser);
(There are lots of opinions about proper regexes for ISO 8601 dates. YMMV. Also, there's no particular reason to punch the function onto the global JSON object. You could store/reference it anywhere you like. )
I took #LastCoder advice and wrote a simple implementation. It seems to be doing what I wanted it to.
var jsonDates = {
dtrx2: /\d{4}-\d{2}-\d{2}/,
parse: function(obj){
var parsedObj = JSON.parse(obj);
return this.parseDates(parsedObj);
},
parseDates: function(obj){
// iterate properties
for(pName in obj){
// make sure the property is 'truthy'
if (obj[pName]){
var value = obj[pName];
// determine if the property is an array
if (Array.isArray(value)){
for(var ii = 0; ii < value.length; ii++){
this.parseDates(value[ii]);
}
}
// determine if the property is an object
else if (typeof(value) == "object"){
this.parseDates(value);
}
// determine if the property is a string containing a date
else if (typeof(value) == "string" && this.dtrx2.test(value)){
// parse and replace
obj[pName] = new Date(obj[pName]);
}
}
}
return obj;
}
};
A live example is available on jsbin. A reference is available on gist.
In order to represent dates using JavaScript, I found that JSON uses ISO 8601, a specific string format to encode dates as string. When I last checked though, there is not an official standard for what the date format should look like. The major browsers use ISO 8601 as the JSON Date encoding format.
So, dates are encoded as ISO 8601 strings and then used just like a regular strings when the JSON is serialized and deserialized.
That being said, ISO dates can be converted into JavaScript dates by use of the JavaScript Date constructor, which accepts a wide variety of inputs to construct a date, ISO 8601 being one of them.
Get todays date:
var curDate = new Date();
document.write(curDate); //Mon Feb 01 2016 12:57:12 GMT-0600 (Central Standard Time)
Parse it into a string:
var dateStr = JSON.parse(JSON.stringify(curDate));
document.write(dateStr);//2016-02-01T18:59:35.375Z
Then convert it back to a javascript date, using the constructor:
var date = new Date(dateStr);
document.write(date); //Mon Feb 01 2016 12:59:35 GMT-0600 (Central Standard Time)
The JSON spec does not include special formatting for dates. As such they are often serialized as a string, sometimes with special markings to indicate it should be treated as a Date object if the language supports them. As such, most (all?) browser-native JSON parsers can not round-trip a Date object properly.
There are several good libraries that help with this - I very much like MomentJS though I have used datejs in the past as well. You would just need to iterate over your objects and convert the proper fields to Date objects after they have been parsed.
I find it helpful to remember that the JSON format is much more restrictive than JavaScript object literal notation.
The JavaScript es5 is able to parse the date like 2018-04-03T22:00:00... in its default Date constructor. (e.g. new Date("2018-04-03T22:00:00...");.
For someone like me, who is searching for automatic date deserialization from JSON web responses, this could be handy.
/**
* Iterates over all entries of the input object and replace the string dates with the objects of {#link Date}.
*/
function fixDateObjects(responseBody) {
if (responseBody) {
const regex = /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}/;
for (const [key, value] of Object.entries(responseBody)) {
const val = String(value);
if (val.startsWith('[object Object]')) {
fixDateObjects(value);
}
if (val.match(regex)) {
responseBody[key] = new Date(val);
}
}
}
}
Explanation: It iterates over all object entries of the JSON(responseBody) and replaces the string dates (matched by the given regex) with the new Date(str) objects.
Result: This brings you freedom of further processing. Now you have all date strings fully deserialized.
//usage
function parseBody(response) {
fixDateObjects(response);
console.log(response.someDate); // Mon Aug 30 2021 22:45:59 GMT+0200 (...)
// further processing
}
You could manually add all of the Date functions you require to the String.prototype.
String.prototype.getYear = function() {
return Date.parse(this).getYear();
};
var obj = {date: new Date()};
var dtObj = JSON.parse(JSON.stringify(obj));
console.log(dtObj.date.getYear());
Or you could override JSON.parse and have it loop through the result object looking for strings that match the time stamp regex and then convert them to Date objects.
var JSON_parse = JSON.parse;
JSON.parse = function(str) {
var res = JSON_parse(str);
findAndConvertStringsToDates(res);
return res;
}
EDIT Here's what I'd throw together for an implementation
(function() {
var jsonParse = JSON.parse;
var reDate = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/i;
function jsonDate(obj) {
var type = typeof(obj);
if(type == 'object') {
for(var p in obj)
if(obj.hasOwnProperty(p))
obj[p] = jsonDate(obj[p]);
return obj;
} else if(type == 'string' && reDate.test(obj)) {
return new Date(obj);
}
return obj;
}
JSON.parse = function(str) { return jsonDate(jsonParse(str)); }
})();
/*
* Tests
*/
var dt = JSON.parse(JSON.stringify({date: new Date()}));
console.log(typeof(dt.date));
console.log(JSON.parse(JSON.stringify(null)));
console.log(JSON.parse(JSON.stringify(123)));
console.log(JSON.parse(JSON.stringify("test")));
console.log(JSON.parse(JSON.stringify(new Date())));
console.log(JSON.parse(JSON.stringify([1,new Date(),2])));
console.log(JSON.parse(JSON.stringify({d: new Date(), d2: {d3: new Date(), d4: [0,new Date(),4]}})));
Related
Getting date properties back from a C# web API that seemed fine but ran into issues when plugging it into DevExtreme DateBox. It was throwing an error of 'getFullYear is not a function' so I checked the dates against this function I found here -
let r: any = http.post('/get', { Param1: 2, Param2: 1 });
console.log(r.StartDate);
console.log(this.isValidDate(r.StartDate));
r.StartDate = new Date(r.StartDate);
r.EndDate = moment(r.EndDate);
console.log('Start Date', this.isValidDate(r.StartDate));
console.log('End Date', this.isValidDate(r.EndDate));
isValidDate(d: any): void {
if (Object.prototype.toString.call(d) === "[object Date]") {
console.log('it is a date');
if (isNaN(d)) { // d.getTime() or d.valueOf() will also work
console.log('date object is not valid');
} else {
console.log('date object is valid');
}
} else {
console.log('not a date object');
}
}
StartDate: "/Date(1657512000000)/"
not a date object
undefined
it is a date
date object is not valid
Start Date undefined
not a date object
End Date undefined
Not sure why this hasn't come up before with this API but didn't want to look to DevExpress given that I can't produce a valid date.
I'm providing this answer to demonstrate one way to parse out the timestamp in the string you have of the following format, inferred by console.log(r.StartDate); ... /Date(TS)/:
// Provided the date has the following structure in a string
var anyStartDate = "/Date(1657512000000)/";
// Prepare to parse it out by getting the positions of the parentheses
var openParens = anyStartDate.indexOf("(");
var closeParens = anyStartDate.indexOf(")");
// Parse out the timestamp
var timeStampStr = anyStartDate.substring(openParens + 1, closeParens);
console.log( timeStampStr ); // 1657512000000
// Convert timestamp to an int. You can do this when you create the obj, but I am separating it here for explanation purposes.
var timeStampInt = parseInt( timeStampStr );
// Now create a date object
var dateObj = new Date( timeStampInt );
console.log( dateObj );
// (on the machine I'm on):
// Outputs: Mon Jul 11 2022 00:00:00 GMT-0400 (Eastern Daylight Time)
// Or outputs: 2022-07-11T04:00:00.000Z
Now I don't know which library(ies) you are using to handle dates so I just went with the native Date object. You can use this SOLUTION however on further insights to apply it to your code.
The point is once the timestamp is extracted, it can be then used to create a Date object, and thus utilize all the methods that are inherent to that class.
In terms of the "timezone", to get it to UTC, it's already in UTC but javascript formats it to your computer's locale. Internally it's still UTC. There's a way to display it as strictly UTC which is in the docs.
`
Consider:
var d = new Date();
var j = d.toJSON();
var s = JSON.stringify(d);
console.log for each of the variables returns:
Tue Jul 29 2014 13:27:19 GMT+0200 (W. Europe Summer Time)
2014-07-29T11:27:19.253Z // a string
"2014-07-29T11:27:19.253Z" // same string as above but packed in ""
I expected them to return the same thing, but then I read
http://www.json.org/js.html:
If the stringify method sees an object that contains a toJSON method,
it calls that method, and stringifies the value returned. This allows
an object to determine its own JSON representation.
and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify:
If an object being stringified has a property named toJSON whose value
is a function, then the toJSON method customizes JSON stringification
behavior: instead of the object being serialized, the value returned
by the toJSON method when called will be serialized. For example:
Does this mean that I always have to do something like:
var d = new Date();
var j = d.toJSON();
var s;
if (d.toJSON) {
s = d.toJSON();
} else {
s = JSON.stringify(d);
}
to ensure that s == j, since I can't rely on JSON.stringify not performing two serialisations?
EDIT
In light of jgillich's answer, the following code helps clarify things (for me at least):
var s = "xxx"
s = JSON.stringify(s)
s = JSON.stringify(s)
s = JSON.stringify(s)
s = JSON.stringify(s)
s = JSON.stringify(s)
console.log(s)
returns:
""\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"xxx\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"""
i.e. JSON.stringify returns not a string representation but rather a serialisation of an object. You'd think I'd realise that from the name and the presence of toString.
toJSON() is not a function that is meant to return JSON. Instead, it is a function that, when it exists, is called before the JSON serialization happens. The following are exactly the same:
JSON.stringify(new Date().toJSON()); // toJSON called manually
JSON.stringify(new Date()); // toJSON called by the serializer
Is there a way to take a date object from a HTML object in the format of ####-##-## and convert it to epoch time. For example, the user inputs the value of August 12, 2012 which shows as 2012-08-12 when I print out the .val() of it, and I need to get this in Epoch time.
EDIT
Code to date:
if (hvStartDate == "") {
hvStartDate = "start"
}
else {
console.log($("#hv-start-date").val()); // => 2012-08-20
hvStartDate = new Date($("#hv-start-date").val()).getTime(); // => NaN
}
if (hvEndDate == "") {
hvEndDate = "end"
}
else {
hvEndDate = new Date($("#hv-end-date").val()).getTime(); // => NaN
}
var myTmp = new Date("2012-08-20");
console.log(myTmp.getTime()); // => NaN
Javascript's Date built-in allows you to pass a date string into its constructor, giving you a Date based on that string. From there, calling getTime( ) will give you the epoch time.
new Date($('.user-value').val()).getTime(); // => epoch time
new Date('2012-08-12').getTime(); // 1344729600000
Caveat: Beware of locale strings and locale-specific date formatting (for example, the position of days and months switch depending on locale).
EDIT: Based on your code in the comment below, here's what you need to do. Notice that you have to instantiate a new Date Object before calling getTime():
if (hvStartDate == "") {
hvStartDate = "start"
}
else {
hvStartDate = new Date($("#hv-start-date").val()).getTime();
}
Simply use the getTime() function. It returns the number of milliseconds since Epoch :
var msSinceEpoch = myDate.getTime();
Complete Date reference at MDN : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date
EDIT : if you have to parse it too, you may :
use new Date(theString) if it has the good format
set yourself the different date fields (see reference) after having parsed it
use a date parsing library. I use this one : http://www.datejs.com/ which is very powerful for all date parsing, computing and formating.
I have two dates 18-Aug-2010 and 19-Aug-2010 of this format. How to find whether which date is greater?
You will need to create a custom parsing function to handle the format you want, and get date objects to compare, for example:
function customParse(str) {
var months = ['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'],
n = months.length, re = /(\d{2})-([a-z]{3})-(\d{4})/i, matches;
while(n--) { months[months[n]]=n; } // map month names to their index :)
matches = str.match(re); // extract date parts from string
return new Date(matches[3], months[matches[2]], matches[1]);
}
customParse("18-Aug-2010");
// "Wed Aug 18 2010 00:00:00"
customParse("19-Aug-2010") > customParse("18-Aug-2010");
// true
You can do the parsing manually, for your given format, but I'd suggest you use the date.js library to parse the dates to Date objects and then compare.
Check it out, its awesome!
And moreover, its a great addition to your js utility toolbox.
The native Date can parse "MMM+ dd yyyy", which gives:
function parseDMY(s){
return new Date(s.replace(/^(\d+)\W+(\w+)\W+/, '$2 $1 '));
}
+parseDMY('19-August-2010') == +new Date(2010, 7, 19) // true
parseDMY('18-Aug-2010') < parseDMY('19-Aug-2010') // true
Firstly, the 'dd-MMM-yyyy' format isn't an accepted input format of the Date constructor (it returns an "invalid date" object) so we need to parse this ourselves. Let's write a function to return a Date object from a string in this format.
function parseMyDate(s) {
var m = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
var match = s.match(/(\d+)-([^.]+)-(\d+)/);
var date = match[1];
var monthText = match[2];
var year = match[3];
var month = m.indexOf(monthText.toLowerCase());
return new Date(year, month, date);
}
Date objects implicitly typecast to a number (milliseconds since 1970; epoch time) so you can compare using normal comparison operators:
if (parseMyDate(date1) > parseMyDate(date2)) ...
Update: IE10, FX30 (and likely more) will understand "18 Aug 2010" without the dashes - Chrome handles either
so Date.parse("18-Aug-2010".replace("/-/g," ")) works in these browsers (and more)
Live Demo
Hence
function compareDates(str1,str2) {
var d1 = Date.parse(str1.replace("/-/g," ")),
d2 = Date.parse(str2.replace("/-/g," "));
return d1<d2;
}
I used the following function:
function datediff()
{
var dat1 = document.getElementById('date1').value;
alert(dat1);//i get 2010-04-01
var dat2 = document.getElementById('date2').value;
alert(dat2);// i get 2010-04-13
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var diffDays = Math.abs((dat1.getTime() - dat2.getTime())/(oneDay));
alert(diffDays);
}
I get the error:
dat1.getTime()` is not a function
That's because your dat1 and dat2 variables are just strings.
You should parse them to get a Date object, for that format I always use the following function:
// parse a date in yyyy-mm-dd format
function parseDate(input) {
var parts = input.match(/(\d+)/g);
// new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[0], parts[1]-1, parts[2]); // months are 0-based
}
I use this function because the Date.parse(string) (or new Date(string)) method is implementation dependent, and the yyyy-MM-dd format will work on modern browser but not on IE, so I prefer doing it manually.
For all those who came here and did indeed use Date typed Variables, here is the solution I found. It does also apply to TypeScript.
I was facing this error because I tried to compare two dates using the following Method
var res = dat1.getTime() > dat2.getTime(); // or any other comparison operator
However Im sure I used a Date object, because Im using angularjs with typescript, and I got the data from a typed API call.
Im not sure why the error is raised, but I assume that because my Object was created by JSON deserialisation, possibly the getTime() method was simply not added to the prototype.
Solution
In this case, recreating a date-Object based on your dates will fix the issue.
var res = new Date(dat1).getTime() > new Date(dat2).getTime()
Edit:
I was right about this. Types will be cast to the according type but they wont be instanciated. Hence there will be a string cast to a date, which will obviously result in a runtime exception.
The trick is, if you use interfaces with non primitive only data such as dates or functions, you will need to perform a mapping after your http request.
class Details {
description: string;
date: Date;
score: number;
approved: boolean;
constructor(data: any) {
Object.assign(this, data);
}
}
and to perform the mapping:
public getDetails(id: number): Promise<Details> {
return this.http
.get<Details>(`${this.baseUrl}/api/details/${id}`)
.map(response => new Details(response.json()))
.toPromise();
}
for arrays use:
public getDetails(): Promise<Details[]> {
return this.http
.get<Details>(`${this.baseUrl}/api/details`)
.map(response => {
const array = JSON.parse(response.json()) as any[];
const details = array.map(data => new Details(data));
return details;
})
.toPromise();
}
For credits and further information about this topic follow the link.
To use this function/method,you need an instance of the class Date .
This method is always used in conjunction with a Date object.
See the code below :
var d = new Date();
d.getTime();
Link : http://www.w3schools.com/jsref/jsref_getTime.asp
dat1 and dat2 are Strings in JavaScript. There is no getTime function on the String prototype. I believe you want the Date.parse() function: http://www.w3schools.com/jsref/jsref_parse.asp
You would use it like this:
var date = Date.parse(dat1);
It's a time format problem
change it by following.
Date.parse(dat1)
instead of
dat1.getTime()
You could conditionally check if the value is a Date object in the following way.
const d1 = new Date();
if (typeof d1 === 'object' && d1 !== null && 'getTime' in d1) {
const result = d1.getTime();
console.log(result); // 👉️ 163966...
}
https://bobbyhadz.com/blog/javascript-typeerror-date-gettime-is-not-a-function