Transforming JSON dates to Javascript dates using AngularJS and ASP.NET

How can I convert a JSON date /Date(1454351400000)/ into a proper date format using AngularJS and ASP.NET?

 $http.get('/home/GetProducts')
    .success(function (result) {
        $scope.products = result;
    })
    .error(function (data) {
        console.log(data);
    });

index.cshtml file

<html>
<head>
    <title>Product with Date</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/App.js"></script>   
</head>

<body ng-app="myApp">
    <h3>Products</h3>

    <div ng-controller="mainController" >

        <table class="table table-striped">
            <tr ng-repeat="product in products">
                <td>{{product.ProductName}}</td>

                <td>{{product.CreatedDate | date:"h:mma 'on' MMM d,y"}}</td>

                <td class="text-right">
                    <button class="btn btn-danger" ng-click="deleteProduct(product)">X</button>
                 </td>
            </tr>
        </table>

         <input type="text" required ng-model="newProduct" />
         <a href="#" class="btn btn-primary" ng-click="addProduct()">Add Product</a>

     </div>
</body>
</html>

Answer №1

Here is a solution that worked for me:

HTML Code

/* Javascript */

'use strict';

filters.filter('jsonDate', function () {
    debugger;
    return function(input, format) {

        // Exit if the value isn't defined
        if(angular.isUndefined(input)) {
            return;
        }

        var date = new Date(parseInt(input.substr(6)));

        // Support for Moment.js added by John Pedrie
        if(typeof moment !== 'undefined' && format) {
            var momentObj = moment(date);
            return momentObj.format(format);
        }
        else {
            return date.toLocaleDateString();
        }
    }
});
<td>{{ data.StartDate | jsonDate : 'DD-MM-YYYY' }} </td>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with uploading media on Wordpress: "Unfortunately, an error occurred during the upload process. Please attempt again at a later time."

Often times, when trying to upload media from the front-end, I encounter this issue: An error occurred during the upload process It seems like the error occurs sporadically, making it even more challenging to troubleshoot. Sometimes, when logging in fo ...

Hot Module Replacement (HMR) for Redux Toolkit in React Native does not trigger updates in

TL;DR: Setting up the Redux Toolkit store in React Native for HMR correctly refreshes the app when changes are made, but the behavior of the reducer remains unchanged! Despite the announcement about React Native Reloading, it seems that the steps outlined ...

Uniform JSON format in REST API

After extensive research on the web, I have yet to find a clear answer to a simple query: should JSON formats be consistent for all HTTP verbs when it comes to a specific resource? For instance: GET http://example.com/api/articles yields [ { id: 1 ...

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

Convert several XML nodes to display in an HTML format

I am currently facing an issue where I am trying to display all the nodes of a specific tag in XML. Although it does filter the data correctly, only one node is showing up. Is there anyone who can assist me with this problem? Below is the XML content: < ...

HTML / CSS / JavaScript Integrated Development Environment with Real-time Preview Window

As I've been exploring different options, I've noticed a small but impactful nuance. When working with jQuery or other UI tools, I really enjoy being able to see my changes instantly. While Adobe Dreamweaver's live view port offers this func ...

"Executing the command 'npm run dev' is successful, however, the command 'next dev' does not yield the expected result

Trying out Next for the first time using npx create-next-app, but running into issues with the scripts. While npm run dev works without any problems, executing next dev gives me an error saying zsh: command not found: next. Any idea why this is happening? ...

Error TS2307: Module 'calculator' could not be located

Running a Sharepoint Framework project in Visual Studio Code: This is the project structure: https://i.stack.imgur.com/GAlsX.png The files are organized as follows: ComplexCalculator.ts export class ComplexCalculator { public sqr(v1: number): number ...

Does vite handle module imports differently during development versus production?

I am currently working on incorporating the jointjs library into a Vue application. It is being declared as a global property in Vue and then modified accordingly. Below is a basic example of what I am trying to achieve: import Vue from 'vue'; im ...

Utilizing Facebook's UI share URL parameters within the Facebook app on mobile devices

Encountering an issue with the Fb ui share functionality on certain smartphones Here is the function: function shareFB(data){ FB.ui({ method: 'share', href: data, }, function(response){}); } Implemented as follows: $urlcod ...

Ways to generate objects with the factory constructor

I recently used to convert my json data and here's the transformed output: import 'dart:convert'; LoginResponse loginResponseFromJson(String str) => LoginResponse.fromJson(json.decode(str)); String loginResponseToJson(LoginResponse da ...

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I still can't figure out what ...

Upon attempting to start the server, the module 'express-stormpath' could not be located

Upon trying to execute node server.js (in a regular terminal without superuser or root permissions), the following error is thrown: alphaunlimitedg@AUNs-PC:~/my-webapp$ node server.js module.js:442 throw err; ^ Error: Cannot find module 'expr ...

Tips on modifying the interface based on the selected entry using jQuery

I am attempting to display a text when different options are selected from the dropdown list. Here is the code for the drop-down list: <div class="dropdown"> <select class="form-control" id="ltype" name="ltype"> <option value=""&g ...

A JSON-based implementation for regular expressions that validate and parse new Date objects

I'm struggling with a specific regular expression. My current code is: "sampleDay": newDate(1402027200000) However, I need to display only this portion: 1402027200000 Using Java, I have managed to remove the entire date using the following line of ...

How can I personalize the color of a Material UI button?

Having trouble changing button colors in Material UI (v1). Is there a way to adjust the theme to mimic Bootstrap, allowing me to simply use "btn-danger" for red, "btn-success" for green...? I attempted using a custom className, but it's not function ...

Unable to send headers to the client in expressjs as they have already been set

After successfully logging in, I am trying to redirect to another page but keep encountering the error message "Cannot set headers after they are sent to the client". I understand that I need to place the res.redirect method somewhere else in my code, bu ...

AngularJS grid designed to emulate the functionalities of a spreadsheet

I have been facing challenges with Angular while attempting to recreate a spreadsheet layout in HTML using ng-repeat. Despite extensive research, I have not found a solution. My goal is to display data in a table format as shown below: <table> & ...

What is causing the list to not populate in this code snippet?

How can I populate file paths in a list of strings List<string> img = new List<string>(); when files are posted by the client using dropzone js? The files upload successfully but the list remains empty. Any suggestions on how to resolve this ...

Changing multiple PHP variables into a JSON object

My PHP script has multiple variables: $name = "John"; $age = 30; $city = "New York"; // and more... Is there a way to combine these variables into a single JSON object? Can this be achieved in PHP? ...