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

The data represented as a JSON Map<String,ArrayList> is having trouble being converted into a bean object within Jersey's rest

Currently, I am facing an issue with retrieving Map values in my Ajax call with JSON data of String, Array and Map. While I am able to successfully get String and Array data by converting them into the Bean class DashboardChartData in Jersey, I am encounte ...

Instructions on keeping a numerical counter at its current value for all site visitors

Recently, I integrated a number counter into my website. However, I am facing an issue where the count resets to zero whenever a new visitor accesses the site. I'd like the count to remain persistent and update based on the previous count. For instanc ...

Allowing Cross-Origin Resource Sharing on an Express Server hosted using Firebase Cloud Functions

Hey there, I have a simple Express setup on Firebase, shown below: import { onRequest } from 'firebase-functions/v2/https'; import express from 'express'; import bodyParser from 'body-parser'; import router from './router ...

Nativescript encountered an issue while attempting to generate the application. The module failed to load: app/main.js

I'm currently experimenting with the sample-Groceries application, and after installing NativeScript and angular 2 on two different machines, I encountered the same error message when trying to execute: tns run android --emulator While IOS operations ...

Failed jQuery AJAX request to database with no returned information

I'm really confused about where the issue lies :S The button triggers a function that passes the parameter "sex" and initiates an ajax call to ajax.php, where I execute a MySQL query to retrieve the results and populate different input boxes. When I ...

What is the best way to utilize $.post() to send a combination of a javascript object and form

I'm having trouble sending a JavaScript object along with form data using the shorthand method $.post(). I want to combine these two, but it's proving to be difficult. Additionally, I need to know how to retrieve the form data on my PHP page. An ...

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...

Activate code coverage for Jest tests within jest-html-reporter/Istanbul

Utilizing the jest-html-reporter package has proven useful in generating an HTML report for my tests. However, while this report displays information on test results (passing and failing), it lacks details regarding code coverage statistics such as lines c ...

Ways to navigate to a new page using jQuery Mobile

As a newcomer to jquery mobile, I am still learning how ajax handles page transitions, and I suspect the issue may be related to that. In my jqm / phonegap app, I have set up multiple pages. The homepage checks if the user is logged in by retrieving membe ...

There seems to be an issue with Node.js/Express: the page at /

Recently, I've been working on some code (specifically in app.js on the server). console.log("Server started. If you're reading this then your computer is still alive."); //Just a test command to ensure everything is functioning correctly. var ...

What is the process behind form authentication in asp.net?

Starting your journey with Form Authentication in ASP.NET ...

Utilizing PHP configurations in JavaScript with AJAX for JSON implementation

Trying to have a config.inc.php file shared between PHP and JavaScript seems to work, but when using ajax, the "error-function" is always triggered. Is there a way to successfully share the config file with working ajax implementation? This is being utili ...

Address the instances of missing values within the JSON response

I'm grappling with understanding how Go treats json null values. Take this example: package main import ( "fmt" "encoding/json" "log" ) type Fruit struct { Name string Price int Owner string } func main() { json ...

Default page featuring an AngularJS modal dialog displayed

I am attempting to display a modal popup dialog using an HTML template. However, instead of appearing as a popup dialog, the HTML code is being inserted into the default HTML page. I have included the controller used below. app.controller('sortFiles&a ...

capturing the value of a button during the onChange event

I'm currently trying to retrieve the button value within an onChange event. My goal is to then bind this value to state, but unfortunately, I am receiving an empty value. <button onChange={this.handleCategoryName} onClick={this.goToNextPage}> ...

Display contents from a JSON file

I need to extract unique locality values from a JSON file in Python, but my current code is only printing the first few entries and not iterating through all 538 elements. Here's what I have: import pandas as pd import json with open('data.json ...

Is there a way to plot countries onto a ThreeJS Sphere?

Currently engaged in a project involving a 3D representation of Earth. Successfully created a 3D Sphere using ThreeJS ...

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block pr ...

Execution of scripts upon completion of document loading via AJAX

When loading a portion of HTML through AJAX, my expectation was that the JavaScript code inside would not run because it is dependent on the DOM being ready. However, to my surprise, the code within document.ready is still executing. I have even placed a ...

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Hello, I am currently learning next.js and facing a common issue that I need help with. I have created my own ES6 JavaScript library and now I want to convert it to babel so I can use it in my next.js application. Is there a way to configure babel for sp ...