Why does AngularJs or javascript convert a 4 digit string as a date

Question

I am using angularJs and have a field stored in MSSQL as varchar(10). The data is stored and displayed correctly so long as it isn't a 4 character number like 1234.

When I save that string, the db has the correct value of 1234, but when it is displayed in the UI, it looks like a date: "1234-01-01T00:00:00.000Z"

The html uses {{project.PurchaseOrderNumber}} to render the data.

angularJs code:

projectService.getProjects().then(function (response) {
    $scope.projects = response.data;
    $scope.loading = false;
}, function() {
    messageService.showError("Failed to get projects. Please refresh and try again");
});


service.getProjects = function() {
    return $http.get(baseUrl + 'API/Projects/');
};

C# code:

[Route("")]
public List<Project> GetProjects()
{
    return _projectService.GetProjects(_companyId.ToString());
}


public List<Project> GetProjects(string companyId)
{
    return _databaseHelper.QueryProc<Project>("projects_get", new { companyId }).ToList();
}


public class Project
{
    public Guid Id { get; set; }
    public Guid CompanyId { get; set; }
    public string Status { get; set; }
    public string PurchaseOrderNumber { get; set; }
}

JSON string as part of the response:

[{
    "Id": "daef5b27-fb8c-4804-a407-0165e17c3a60",
    "CompanyId": "76bca824-6e93-45a5-bc5a-ba20d030ebce",
    "Status": "New",
    "PurchaseOrderNumber": "1234-01-01T00:00:00.000Z"
}, {
    "Id": "09d87946-dec2-4721-bf71-df436919b599",
    "CompanyId": "76bca824-6e93-45a5-bc5a-ba20d030ebce",
    "Status": "New",
    "PurchaseOrderNumber": "160728"
}]

MSSQL code:

SELECT [id]
        ,[companyId]
        ,[status]
        ,[purchaseOrderNumber]
    FROM [dbo].[projects]

Results in SQL

I have confirmed that prior to GetProjects returning the results, the purchaseOrderNumber is still 1234. However, when I break at $scope.projects = response.data; it is in date format.

UPDATE

I just checked the Network tab in Chrome and see that the data is actually in the correct format, but when it is provided to response.data it isn't.

4:{Id: "daef5b27-fb8c-4804-a407-0165e17c3a60", CompanyId: "76bca824-6e93-45a5-bc5a-ba20d030ebce",…}
   CompanyId:"76bca824-6e93-45a5-bc5a-ba20d030ebce"
   Id:"daef5b27-fb8c-4804-a407-0165e17c3a60"
   PurchaseOrderNumber:"1234"
   Status:"New"

UPDATE 2

I have learned that this happens with any field. If it contains only 4 digits (any 4 digits, in any order), it is rendered as a date when it is provided to angularJs

Why does angular do this? How do I stop it?

Show us the source JSON and other relevant code. Angular isn't doing this on it's own. Create a demo that reproduces this — charlietfl, Jul 28 '16 at 16:56
@charlietfl, I added the relevant code. Do you recommend a tool where I can create a demo that anyone can test? — davids, Jul 28 '16 at 19:52
The trouble with that service is I can't reflect where the issue happens. By the time the data is in `JSON`, it is a date. As I think about it, that must mean it is an issue in how dapper is converting it to `JSON`. — davids, Jul 28 '16 at 20:17
yup...exactly the point when you create a demo. Seems very strange you have date and number being sent from server for same field — charlietfl, Jul 28 '16 at 20:19
the db is returning the `varchar`, dapper is mapping it to a `String`, but if it is four digits, it thinks it should be formatted as a date first. — davids, Jul 28 '16 at 20:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118586/discussion-between-davids-and-charlietfl). — davids, Jul 29 '16 at 01:06

score 0 · Answer 1 · answered Jul 28 '16 at 16:48

0

Maybe the input you are using is type="date" ?

You can print the variable as it is stored like this:

{{project.PurchaseOrderNumber|raw}}

answered Jul 28 '16 at 16:48

Simon Berton

468
5
13

Here is the original input: `` – davids Jul 28 '16 at 19:19
changing it to raw didn't help – davids Jul 28 '16 at 19:28
Could you print the Jain you have? – Simon Berton Jul 29 '16 at 00:16
Or use the dump provided by angular so you know how the information is stored – Simon Berton Jul 29 '16 at 00:16
I am not sure what Jain is, so I can't provide it. I updated the question to show how it is stored prior to angular. – davids Aug 04 '16 at 23:46

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

Angularjs remove line of response data before JSON eval

see the solution above and in your case the transformRespose would be

{
transformResponse : []
}

Now, once the transformResponse is set to null the success callback would be raw json instead of Objects like usual in angularjs.

edited May 23 '17 at 10:33

Community

1
1

answered Jul 29 '16 at 23:33

user1827915

1
1

I want to use a scalpel to remove the problem, not a hammer to kill it all. :) Is there a way to prevent angular from formatting the string as a date unless I specifically request it? – davids Aug 04 '16 at 23:49

score 0 · Answer 3 · answered Aug 26 '16 at 15:19

If you are parsing JSON string to json object and converting date string to date object, you need to ignore 4 character value object to convert into date object

Update

I guess somewhere in your angular data service or controller you are parsing json string into JSON object and there is a logic to convert date string to date object written somewhere there. T hat logic will have REGEX for ISODate , so You just need to improve that logic to not consider 4 digit string to match Regx.

score 0 · Answer 4 · answered Mar 27 '20 at 07:50

I had the exact same issue. In my case I sent the data as a number via JSON to the frontend and angular interpreted it as a date. By changing the value to a string I was able to get it working properly.

But in your case maybe trying it the other way around works?

Why does AngularJs or javascript convert a 4 digit string as a date

4 Answers4