Retrieving json data with ngTable (Angular)

Question

I want to retrieve a json data in an HTML page with Angular, using ngTable.This is how I implemented the service and the controller:

 angular.module('detail', ['ui.router', 'ngTable', 'ngResource'])
 .config(function ($stateProvider) {
 $stateProvider
 .state('stats.orderdetails', {
 url: '/orderdetails',
 templateUrl: 'order/details/details.html',
 controller: 'OrderDetailsCtrl as orderDetails'
 });
 })
 .service('orderDetailsService', function ($http, $log, configuration) {
 this.find = function (startDate, endDate) {
 return $http.get(configuration.apiEndpoint + '/orderdetails', {params: {startDate: startDate, endDate: endDate}})
 .success(function (res) {
 $log.debug('Getting order summary startDate=<' + startDate + '> endDate=<' + endDate + '>');
 return res;
 console.log(res);
 })
 .error(function (res) {
 $log.error('Connection error while getting order details');
 if (res !== null && res.message === 'Invalid date format') {
 throw {error: res.exception, message: 'Format de date invalide.', showSummary: true};
 } else {
 throw {error: 'API_REST_NOT_AVAILABLE', message: 'Une erreur est survenue.', showSummary: false};
 }
 });
 };
})
 .controller('OrderDetailsCtrl', OrderDetailsCtrl);
 function OrderDetailsCtrl(orderDetailsService, $filter, NgTableParams, $scope) {
 var orderDetails = this;
 var data = [];
 orderDetails.getSummary = function (startdate, endate) {
 orderDetailsService.find(startdate, endate)
 .then(function(res) {
 orderDetails.summary = res.data;
 data = orderDetails.summary;
});
 };
 $scope.$on('filtering', function (event, filter) {
 orderDetails.getSummary(filter.startdate, filter.enddate);
 });
 orderDetails.statusList=[{id: '', title: 'Tout'}, {id: 'Expirée', title: 'Expirée'}, {id: 'Encaissée', title: 'Encaissée'}];
 orderDetails.tableParams = new NgTableParams({
 page: 1, // show first page
 count: 5, // count per page
 filter: {orderStatus:''},
 sorting: {orderNumber: 'asc'} // initial sorting
 }, {
 total: data.length, // length of data
 counts:[5,10,15,20],// hide page counts control
 getData: function($defer, params) {
 // use build-in angular filter
 var filteredData = params.filter() ?
 $filter('filter')(data, params.filter()) :
 data;
 var orderedData = params.sorting() ?
 $filter('orderBy')(filteredData, params.orderBy()) :
 data;
 params.total(orderedData.length);
 $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
 });
 orderDetails.countPerPage = 1;
 }

the json data is as follows:

 [{"orderNumber":"040778","restaurantReference":"465","customerReference":"417644408646330","totalAmount"
 :490,"orderStatus": {"frontLabel":"Encaissée","daoField":"CASHED_IN"},"orderDate":"07/03/2013 00:00:00"
 ,"withdrawalPoint": {"frontLabel":"","daoField":"N/A"},"paymentType": {"frontLabel":"PayPal","daoField"
 :"PAYPAL"},"offerType":{"frontLabel":"Pas d'offre","daoField":"N/A"},"offerReference":""},{"orderNumber"
 :"979722","restaurantReference":"465","customerReference":"2214531549088301","totalAmount":120,"orderStatus": {"frontLabel": "Expirée", "daoField":"EXPIRED"},"orderDate":"07/03/2013 00:00:00","withdrawalPoint":{"frontLabel" 
 :"","daoField":"N/A"},"paymentType": {"frontLabel":"PayPal","daoField":"PAYPAL"},"offerType":{"frontLabel"
 :"Pas d'offre","daoField":"N/A"},"offerReference":""}]

the code in the HTML page is as follows:

 <div class="row">
 <h4 class="text-center">Rechercher des commandes (Du {{ filters.startdate | date:'dd-MM-yyyy'}} au {{filters.enddate |
 date:'dd-MM-yyyy' }})
 </h4>
 </script>
 <table ng-table="orderDetails.tableParams" class="table table-hover" show-filter="true" >
 <tr ng-repeat="order in $data">
 <td data-title="'Numéro commande'" sortable= "'orderNumber'" >
 {{order.orderNumber}}
 </td>
 <td data-title="'Ref restaurant'" sortable="'restaurantReference'">
 {{order.restaurantReference}}
 </td>
 <td data-title="'Ref client'" sortable="'customerReference'">
 {{order.customerReference}}
 </td>
 <td data-title="'Montant total'" sortable="'totalAmount'">
 {{order.totalAmount | currency }}
 </td>
 <td data-title="'statut'" sortable="'orderStatus'" filter="{'orderStatus.frontLabel':'select'}" filter-data="orderDetails.statusList">
 {{order.orderStatus.frontLabel}}
 </td>
 <td data-title="'Date commande'" sortable="'orderDate'">
 {{order.orderDate}}
 </td>
 <td data-title="'Point de retrait'" sortable="'withdrawalPoint.frontLabel'">
 {{order.withdrawalPoint.frontLabel}}
 </td>
 <td data-title="'Type de paiement'" sortable="'paymentType.frontLabel'">
 {{order.paymentType.frontLabel}}
 </td>
 <td data-title="'Type d\'offre'" sortable="'offerType.frontLabel'">
 {{order.offerType.frontLabel}}
 </td>
 <td data-title="'Référence de l\'offre'" sortable="'offerReference'">
 {{order.offerReference}}
 </td>
 </tr>
 </table>
 </div>

I can't retrieve the values in HTML.What am I doing wrong? Thanks in adavance

• Pankaj Parkar: more code less readability. please create fiddle/plunkr .

Answer 1

<tr ng-repeat="order in $data">

should be

<tr ng-repeat="order in data">

you dont use the $ inside of ng-directives

• szejli: I don't think that this is the problem.I succeded to retrieve the data with $data when my json structure was simple.I think that it is the json structure that causes the problem.this is the plunker:plnkr.co/edit/kDng52Y4k1xzKQUi2HUE?p=preview
• messerbill: ok, but this was wrong anyway ;) i just validated your json and it seems to be correct. are you sure, that your JSON has been sent to the client? the problem seems to be, that $scope.data is not defined. You can check this via several ways, the easiest is just to insert {{data}} into your html. In your example, this does not exists. orderDetails.getSummary = function (startdate, endate) { ... $scope.data = orderDetails.summary; ... } thats what i mean. dont use "var data = foo", but "$scope.data = foo"
• szejli: Thank you for your response.Now I get the data but the sorting and the filtering of ngTable don't work.I have updated my plunker here plnkr.co/edit/kDng52Y4k1xzKQUi2HUE?p=preview.I don't know what I am doing wrong
• messerbill: <table ng-table="orderDetails.tableParams" class="table table-hover" show-filter="true" ><tr ng-repeat="order in orderDetails.data"> should look like <table ng-table="orderDetails.tableParams" class="table table-hover"><tr ng-repeat="order in orderDetails.data | filter: show">
• messerbill: you need to ensure, that 'show' is either true or false