Formating dates in AngularJS ng-repeat directive from json array

Question

I'm obtaining a response in json format from laravel application like below:

[{"id":11,"name":"test","description":"adddas","isDone":false,"created_at":{"date":"2017-09-06 12:23:23.000000","timezone_type":3,"timezone":"UTC"}},{"id":12,"name":"test2","description":"asdasdsa","isDone":false,"created_at":{"date":"2017-09-13 06:23:22.000000","timezone_type":3,"timezone":"UTC"}},{"id":13,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 18:44:57.000000","timezone_type":3,"timezone":"UTC"}},{"id":14,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:23:58.000000","timezone_type":3,"timezone":"UTC"}},{"id":15,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:45:35.000000","timezone_type":3,"timezone":"UTC"}}]

I'm trying to format these data in Angular js in ng-repeat directive in way like below:

<div class="table-responsive">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>name</th>
                <th>Created at</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="task in tasks">
                <td>{{task.name}}</td>
                <td>{{ task.created_at.date | date:'yyyy-MM-dd HH:mm:ss' }}</td>
            </tr>
            </tbody>
        </table>
    </div>

The problem is with format data. I'd like to format this as we can see above in format date:yyyy-MM-dd HH:mm:ss. The result is a table with incorrect dates:

How could I reduces .000000 in for example 2017-09-06 12:23:23.000000? The filter does not work at all. I don't know why. I would be greateful for help.

I'm obtaining data from database by Doctrine query in way like this:

public function getTasks(){


        $results = $this->entityManager->createQueryBuilder()
            ->select('t')->from('\TodoList\Http\Entities\Task', 't')
            ->getQuery()->getArrayResult();
       true);
      return $results;

    }

Ramin Farajpour · Accepted Answer · 2017-09-04 07:41:23Z

2

add this function to your controller

 $scope.ToDate=function(date) {
   return new Date(date);
 }

and change your view like code below

<tr ng-repeat="task in tasks">
            <td>{{task.name}}</td>
            <td>
            {{ ToDate(task.created_at.date) | date:'yyyy-MM-dd HH:mm:ss' }}
            </td>
</tr>

answered Sep 4, 2017 at 7:41

Ramin Farajpour

4274 silver badges10 bronze badges

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

Comments

Varun Sukheja · Accepted Answer · 2017-09-03 22:38:14Z

Pass date as "date": "2017-09-06T12:23:23.000000" instead of "date":"2017-09-06 12:23:23.000000"

Check below code:

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
    $scope.title = 'Hello world';
    $scope.tasks = [{
        "id": 11,
        "name": "test",
        "description": "adddas",
        "isDone": false,
        "created_at": {
            "date": "2017-09-06T12:23:23.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 12,
        "name": "test2",
        "description": "asdasdsa",
        "isDone": false,
        "created_at": {
            "date": "2017-09-13T06:23:22.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 13,
        "name": "task12321",
        "description": "jakis tam testowy task",
        "isDone": false,
        "created_at": {
            "date": "2017-09-03T18:44:57.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 14,
        "name": "task12321",
        "description": "jakis tam testowy task",
        "isDone": false,
        "created_at": {
            "date": "2017-09-03T20:23:58.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 15,
        "name": "task12321",
        "description": "jakis tam testowy task",
        "isDone": false,
        "created_at": {
            "date": "2017-09-03T20:45:35.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }];

}]);

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller='MyController' ng-app="myApp">
    <div>{{title}}</div>

    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>name</th>
                    <th>Created at</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in tasks">
                    <td>{{task.name}}</td>
                    <td>{{ task.created_at.date | date : "yyyy-MM-dd h:mm:ss"}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

I've updated my question I've written how I'am obtaining data from database by Doctrine. There's no way to obtaining data in other format like this.

Collectives™ on Stack Overflow

Formating dates in AngularJS ng-repeat directive from json array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related