The functionality of ng-table appears to be compromised when working with JSON data

Question

The functionality of ng-table appears to be compromised when working with JSON data

Currently, I am facing an issue while using a JSON file to populate data in my Angular ng-table. Even though the JSON data is being displayed in a regular table format, certain functionalities of ng-table like pagination and view limit are not functioning as expected.

The error message appearing in the console is:

TypeError: Cannot read property 'slice' of undefined

Below are the relevant parts of my code:


var app = angular.module('app', ['ngResource', 'ngTable']);

    app.service('tableService', ['$resource', function($resource){
            this.getTableData = function(id, email, date) {
                var tableDataList = $resource("table.json");

                return tableDataList.get ({
                    id: id,
                    email: email,
                    date: date
                })
            }
    }])

    app.controller('tableCtrl', function($scope, tableService, ngTableParams) {

                //Data
                $scope.id = tableService.id;
                $scope.email = tableService.email;
                $scope.date = tableService.date;

                $scope.dtResult = tableService.getTableData(this.id, this.email, this.date);


                $scope.tableParams = new ngTableParams({
                    page: 1,            
                    count: 10           
                }, {
                    total: $scope.dtResult.length, 
                    getData: function ($defer, params) {
                       $defer.resolve($scope.dtResult.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                })

    });

HTML

<table ng-table="tableParams" class="table">
              <tr ng-repeat="w in dtResult.list">
                  <td data-title="'ID'">
                      {{ w.id }}
                  </td>
                  <td data-title="'Email Address'">
                      {{ w.email }}
                  </td>
                  <td data-title="'Date'">
                      {{ w.date }}
                  </td>
              </tr>
</table>

You can access the Plunkr version here.

I would appreciate any assistance with resolving this issue. Thank you.

javascript angularjs ngtable

Answer 1

Answer №1

Modify this within tableService

 let tableListData = $resource('data-table.json',{ }, {
        fetchInfo: {method:'GET', isArray: false}
      });

Answer 2

Modify this within tableService

 let tableListData = $resource('data-table.json',{ }, {
        fetchInfo: {method:'GET', isArray: false}
      });

Answer 3

Answer №2

The reason why this is occurring is because when you receive the return from the service, it includes the $promise which takes time to ensure that the data is guaranteed.

Take a look at the code where I made some modifications and then continue with your other tasks.

Access the Plunker link here

var app = angular.module('app', ['ngResource', 'ngTable']);

app.service('tableService', ['$resource', function($resource){
    this.getTableData = function(id, email, date) {
        var tableDataList = $resource("table.json");

        return tableDataList.get ({
            id: id,
            email: email,
            date: date
        }).$promise;
    }
}])

app.controller('tableCtrl', function($scope, tableService, ngTableParams) {

    //Data
    $scope.id = tableService.id;
    $scope.email = tableService.email;
    $scope.date = tableService.date;

    tableService.getTableData(this.id, this.email, this.date).then(function(data){
      console.log(data);
      $scope.dtResult = data.list;
      $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: $scope.dtResult.length, // length of data
        getData: function ($defer, params) {

          $defer.resolve($scope.dtResult.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

    });



});

Answer 4

The reason why this is occurring is because when you receive the return from the service, it includes the $promise which takes time to ensure that the data is guaranteed.

Take a look at the code where I made some modifications and then continue with your other tasks.

Access the Plunker link here

var app = angular.module('app', ['ngResource', 'ngTable']);

app.service('tableService', ['$resource', function($resource){
    this.getTableData = function(id, email, date) {
        var tableDataList = $resource("table.json");

        return tableDataList.get ({
            id: id,
            email: email,
            date: date
        }).$promise;
    }
}])

app.controller('tableCtrl', function($scope, tableService, ngTableParams) {

    //Data
    $scope.id = tableService.id;
    $scope.email = tableService.email;
    $scope.date = tableService.date;

    tableService.getTableData(this.id, this.email, this.date).then(function(data){
      console.log(data);
      $scope.dtResult = data.list;
      $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: $scope.dtResult.length, // length of data
        getData: function ($defer, params) {

          $defer.resolve($scope.dtResult.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

    });



});

Answer 5

Answer №3

$scope.dtResult is initialized with the result obtained from making a get request using a $resource:

$scope.dtResult = tableService.getTableData(...)

Later on:

$scope.dtResult.slice(...)

The error likely originates from the line above.

As per the documentation: "It is crucial to understand that invoking a $resource object method immediately returns an empty reference (object or array based on isArray)." -- This indicates that initially, $scope.dtResult will be an empty object here (it will be populated once the get call fetches some results). Perhaps switching to using query instead of

get</code could solve the issue and ensure the result is in an array format?</p>

<p><strong>EDIT:</strong></p>

<p>After reviewing the latest plunkr mentioned in the comments, the specific error is <code>TypeError: undefined is not a function

. This contrasts with the original issue raised. While dtResult exists, it does not have a slice function. Given the data structure (as seen in the plunkr):

{
  list: [
    {...},
    ...
  ]
}

There's an object containing a list, and this list should be displayed in the table.

In this scenario, the workaround provided by $resource to avoid callback usage may not apply (where an initial empty object/array is returned before getting updated with fetched details later). Directly utilizing the $promise, as recommended by @Akshay Dhankhar in another answer, seems necessary. The "official" example for server-side list with ng-table demonstrates a similar approach.

Hence, rather than calling tableService.getTableData upfront, perform it within your getData function and resolve the deferred object for the table upon receiving the actual result:

// no need for this: $scope.dtResult = tableService.getTableData(this.id, this.email, this.date);

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    getData: function ($defer, params) {
      tableService.getTableData($scope.id, $scope.email, $scope.date).$promise.then(function(data) {
         params.total(data.list.length);
         $defer.resolve(data.list.slice((params.page() - 1) * params.count(), params.page() * params.count()));
      });
    }
})

In the HTML, utilize $data as your list:

<table ng-table="tableParams" class="table">
    <tr ng-repeat="w in $data">
        <td data-title="'ID'">
        ...

Answer 6

$scope.dtResult is initialized with the result obtained from making a get request using a $resource:

$scope.dtResult = tableService.getTableData(...)

Later on:

$scope.dtResult.slice(...)

The error likely originates from the line above.

As per the documentation: "It is crucial to understand that invoking a $resource object method immediately returns an empty reference (object or array based on isArray)." -- This indicates that initially, $scope.dtResult will be an empty object here (it will be populated once the get call fetches some results). Perhaps switching to using query instead of

get</code could solve the issue and ensure the result is in an array format?</p>

<p><strong>EDIT:</strong></p>

<p>After reviewing the latest plunkr mentioned in the comments, the specific error is <code>TypeError: undefined is not a function

. This contrasts with the original issue raised. While dtResult exists, it does not have a slice function. Given the data structure (as seen in the plunkr):

{
  list: [
    {...},
    ...
  ]
}

There's an object containing a list, and this list should be displayed in the table.

In this scenario, the workaround provided by $resource to avoid callback usage may not apply (where an initial empty object/array is returned before getting updated with fetched details later). Directly utilizing the $promise, as recommended by @Akshay Dhankhar in another answer, seems necessary. The "official" example for server-side list with ng-table demonstrates a similar approach.

Hence, rather than calling tableService.getTableData upfront, perform it within your getData function and resolve the deferred object for the table upon receiving the actual result:

// no need for this: $scope.dtResult = tableService.getTableData(this.id, this.email, this.date);

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    getData: function ($defer, params) {
      tableService.getTableData($scope.id, $scope.email, $scope.date).$promise.then(function(data) {
         params.total(data.list.length);
         $defer.resolve(data.list.slice((params.page() - 1) * params.count(), params.page() * params.count()));
      });
    }
})

In the HTML, utilize $data as your list:

<table ng-table="tableParams" class="table">
    <tr ng-repeat="w in $data">
        <td data-title="'ID'">
        ...

The functionality of ng-table appears to be compromised when working with JSON data

Answer №1

Answer №2

Answer №3

Similar questions

When a npm package consists of multiple files, what is the best way to import them?

The error message 'mainController' is not recognized as a function and is undefined, version 1.4

Determine the item in a collection of objects that contains a specific key

Obtain every possible sequence of US phone number segments for a provided number

Is there a way to utilize the reset() function within an input form?

What is the best way to isolate a single element within a for loop and exclude all others?

Warning: Nodemailer has issued a deprecation warning regarding the outdated `punycode` module

What exactly does "nothing" mean in Node when using async await?

Having trouble with the locality function in Google Places v3 API autocomplete?

VisualMap in ECharts featuring multiple lines for each series

Transmitting a Wav file from JavaScript to Flask

What sets Vuex apart from a traditional store object?

The data retrieved from the web API is not undergoing the necessary conversion process

When working with a set of objects, consider utilizing jQuery's InArray() method to effectively handle

Is it recommended to utilize addEventListener?

Enhancing User Experience with Dynamic Table Layout in Angular

Can you explain the functionality of $on.constructor in AngularJS?

onChange does not trigger useEffect

Parse the JSON data response as needed in ReactJS

Unpredictable preset inline styles for HTML input elements