{{x.date | date:'hh:mm'}} is not working

Question

Am getting date from json data as Apr 15, 2015 10:15 PM I want to display time only from json response data like 10:15 PM in html page Here i put my js function and html code

JS Function

function smsHistory($scope) {
    var user_id = sessionStorage.getItem('user_id');
    var authentication_key = sessionStorage.getItem('auth_id');
    $scope.loading = true;

    $.ajax({
        type: 'GET',
        // here I define a url to get api data
        url: '............/get_sms_history',
        data: {user_id: user_id, authentication_key: authentication_key},
        timeout: 5000,
        success: function (response) {
            $scope.loading = false;
            // here i parse the data in json              
            $scope.records = JSON.parse(response).records;
            $scope.$apply();
            var x = $scope.records;

            $scope.setbank = function (x) {
            };

            $scope.isSelected = function (x) {
                return $scope.selected === x;
            };
        },
        error: function (response) {
            $scope.error = true;
            $scope.$apply();
        }
    });
}

HTML Code

<div ng-controller="smsHistory">
    <div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div>
    <ons-list class="plan-list">
        // here i use ng-repeat to repeat the data if multiple records are their
        <ons-list-item modifier="chevron" class="plan" ng-repeat="x in records">
            <ons-row>
                <ons-col width="80px" class="plan-left">
                    // here i got the date value from json data
                    <div class="plan-date">{{x.date}}</div>
                    <div class="plan-duration"></div>
                </ons-col>
                <ons-col width="6px" class="plan-center" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}">
                </ons-col>
                <ons-col class="plan-right">
                    <div class="plan-name">{{x.name}}</div>
                    <div class="plan-info">
                        <div>
                            <ons-icon icon="ion-android-textsms"></ons-icon>
                            &nbsp;{{x.phone}}
                        </div>
                        <div>
                            <span>{{x.charge}}</span>&nbsp;&nbsp;<span>{{x.balance}}</span>&nbsp;&nbsp;<span>{{x.status}}</span>
                        </div>
                        <div>
                            <ons-icon icon="fa-map-marker"></ons-icon>
                            &nbsp;{{x.destination}}<span></span>
                        </div>
                    </div>
                </ons-col>
            </ons-row>
        </ons-list-item>
        <ons-list-item></ons-list-item>
    </ons-list>
</div>

I want time only from this datetime json data using AngularJS. Please help me. Thanks in advance.

score 1 · Accepted Answer · answered Mar 28 '16 at 06:47

1

Replace your line

$scope.records = JSON.parse(response).records

with following:

var records = $scope.records = JSON.parse(response).records;
angular.forEach($scope.records, function(record) {
     record.date = new Date(record.date);
});
$scope.records = records;

We are basically, converting the string date to a date object.

answered Mar 28 '16 at 06:47

Shashank Agrawal

21,660
9
71
105

i want only time from that date object , can you help me for that ? – Ravi Kapupara Mar 28 '16 at 07:06
Now, use `{{x.date | date:'hh:mm'}}` in your HTML. – Shashank Agrawal Mar 28 '16 at 07:07
Just a tip: You don't need to use `$scope.$apply` if you directly can use Angular's `$http` service. jQuery isn't needed to make AJAX calls. – Shashank Agrawal Mar 28 '16 at 07:19

{{x.date | date:'hh:mm'}} is not working

1 Answers1