DataTable with AngularJS $http.get

Question

I wan't to use bootstrap datatable with angularJS - here's my code : https://codepen.io/bafu2203/pen/VzBVmy

As you see, when i want to list in table datas from $http.get call, the table doesn't work. But it work great, when i ng-repeat from $scope.data

HTML :

<div class="container" ng-app="formvalid">
  <div class="panel" data-ng-controller="validationCtrl">
  <div class="panel-heading border">    
    <h2>Data table using jquery datatable in Angularjs
    </h2>
  </div>
  <div class="panel-body">
      <table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Position</th>

        </tr>
      </thead>
        <tbody>
          <tr ng-repeat="n in data">
            <td>{{$index+1}}</td>
            <td>{{n.name}}</td>
             <td>{{n.system}}</td>

          </tr>
        </tbody>
    </table>

     <table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Position</th>

        </tr>
      </thead>
        <tbody>
          <tr ng-repeat="n in test">
            <td>{{$index+1}}</td>
            <td>{{n.Name}}</td>
             <td>{{n.City}}</td>

          </tr>
        </tbody>
    </table>
  </div>
</div>
</div>

JS :

var app=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app.controller('validationCtrl',function($scope, $http, $timeout){
  $scope.getapi = function(){
        $http({
            method: 'GET',
            url: 'https://www.w3schools.com/angular/customers_mysql.php',
        })
            .then(function successCallback(data) {
                $scope.test = data.data;
                console.log($scope.test);
                $timeout($scope.getapi, 1000);
            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });

    };
    $scope.getapi();


  $scope.data=[
  {
    "name" : "Tiger Nixon",
    "system" : "System Architect"
  },
  {
    "name" : "Tiger asd",
    "system" : "System Architect"
  },
  {
    "name" : "Tiger d",
    "system" : "System gadfadgf"
  },
  {
    "name" : "Tiger Nixon",
    "system" : "gadsf Architect"
  },
  {
    "name" : "Tiger Nixon",
    "system" : "asdd Architect"
  }
];



$scope.dataTableOpt = {
   //custom datatable options 
  // or load data through ajax call also
  "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
  "aoSearchCols": [
      null
    ],
  };
});

Thanks for answers in advance!

Abd0m1nals · Accepted Answer · 2017-08-25 08:29:31Z

2

You have to access it the data like this:

$scope.test = data.data.records;

answered Aug 25, 2017 at 8:29

Abd0m1nals

2,48615 silver badges27 bronze badges

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

4 Comments

bafix2203 Over a year ago

Yes, but now sorting, and filtering doesn't work in table with ng-repeat

bafix2203 Over a year ago

Have you any idea why?

Abd0m1nals Over a year ago

because the data comes inside an object and inside a key called records :)

Abd0m1nals Over a year ago

Check the result of data to see the architecture of the json output

Collectives™ on Stack Overflow

DataTable with AngularJS $http.get

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related