Angularjs Date format in GET Response

Question

I want to display date format like this 02-jan-2018

GET Method

$scope.allReport = function() {
       $http({
            method: 'GET',
            url: 'api/admin/report'
        }).success( function (data) {
                $scope.data = data.data;
               console.log($scope.data);
          }).error(function (response){
                console.log("error");  
       });
    }

Response

0:{
created_at:"2018-03-02 00:00:00"
cuid:21
id:64
name:"my"
status:"D"
time:"07:01 PM"
updated_at:"2018-03-02 00:00:00"
}

1:{
created_at:"2018-03-02 00:00:00"
cuid:22
id:65
name:"my1"
status:"P"
time:"06:59 PM"
updated_at:"2018-03-02 00:00:00"
}

I display like this View

<tr ng-repeat="user in data | filter:{name:searchbyname}">
    <td>{{$index+1}}</td>
    <td>{{user.name}}</td>
    <td>{{user.created_at | date : "dd-MMM-yyyy" }}</td>
    <td>{{user.status}}</td>
</tr>

i want to display like created_at this in 02-jan-2018

what's problem in that?

Rahul Sharma
– Rahul Sharma

2018-03-05 07:02:09 +00:00
Commented Mar 5, 2018 at 7:02 — Rahul Sharma
– Rahul Sharma, Commented Mar 5, 2018 at 7:02
Same format only displaying

Learning
– Learning

2018-03-05 07:08:24 +00:00
Commented Mar 5, 2018 at 7:08 — Learning
– Learning, Commented Mar 5, 2018 at 7:08
check my answer that might help.

Rahul Sharma
– Rahul Sharma

2018-03-05 07:10:18 +00:00
Commented Mar 5, 2018 at 7:10 — Rahul Sharma
– Rahul Sharma, Commented Mar 5, 2018 at 7:10

Rahul Sharma · Accepted Answer · 2018-03-05 07:09:40Z

2

try this, you are getting the date in string format.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="user in data | filter:{name:searchbyname}">
    <td>{{$index+1}}</td>
    <td>{{user.name}}</td>
    <td>{{user.created_at | date : "dd-MMM-yyyy" }}</td>
    <td>{{user.status}}</td>
</tr>
</table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.data= [{
    created_at: "2018-03-02 00:00:00",
    cuid: 21,
    id: 64,
    name: "my",
    status: "D",
    time: "07:01 PM",
    updated_at: "2018-03-02 00:00:00",
    }, {
        created_at: "2018-03-02 00:00:00",
        cuid: 22,
        id: 65,
        name: "my1",
        status: "P",
        time: "06:59 PM",
        updated_at: "2018-03-02 00:00:00"
    }];
    
    $scope.data = $scope.data.map(obj =>{
    	obj.created_at  = new Date(obj.created_at); // converting string to date
    	return obj;
    })
});
</script>

</body>
</html>

answered Mar 5, 2018 at 7:09

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rahul Sharma Over a year ago

Are you getting the response? $scope.data = data.data; after this step, you are trying right not outside?

Learning Over a year ago

How to get in POST API

Rahul Sharma Over a year ago

use $http.post for calling post apis.

Learning Over a year ago

Here i want to apply $scope.data = response.data.data; $scope.name = $scope.data.name; $scope.created_at = $scope.data.created_at; change date format

Rahul Sharma Over a year ago

you cant do $scope.data.name because $scope.data is not an object is an array. You don't need to store the formatted date in DB because It may create problems while performing sort or search operations.

|

Tarek.Eladly · Accepted Answer · 2018-03-05 07:02:25Z

0

An advice form a friend plz use moment you will have a lot of problems with date pipe in angular and moment is more flexible ;)

Angular2 date pipe does not work in IE 11 and edge 13/14

date pipe issue on IE10 - 'Intl' is undefined

https://www.npmjs.com/package/moment

{{now | momentPipe:'DD-MMM-YYYY'}}

answered Mar 5, 2018 at 7:02

Tarek.Eladly

75913 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angularjs Date format in GET Response

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related