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

more code less readability. please create fiddle/plunkr .

Pankaj Parkar
– Pankaj Parkar

2015-05-26 13:54:27 +00:00
Commented May 26, 2015 at 13:54 — Pankaj Parkar
– Pankaj Parkar, Commented May 26, 2015 at 13:54

messerbill · Accepted Answer · 2015-05-26 13:59:21Z

1

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

should be

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

you dont use the $ inside of ng-directives

answered May 26, 2015 at 13:59

messerbill

5,6391 gold badge31 silver badges39 bronze badges

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

6 Comments

szejli Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

<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 Over a year ago

you need to ensure, that 'show' is either true or false

|

Collectives™ on Stack Overflow

Retrieving json data with ngTable (Angular)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related