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

"Issue with Material-ui Autocomplete where the defaultValue does not function properly

JavaScript 'await' throws error 'then is not defined'

Displaying the data from a database on a browser using node.js, MySQL, and Jade

A Typescript Function for Generating Scalable and Unique Identifiers

The Angular2 component link imported in the core.module is not functioning properly

Dealing with multiple POST requests at once in Node Express JS - Best Practices

Is it possible for JavaScript to access and read a local file from a web page hosted locally

Prevent a HTML button from being clicked multiple times before it disappears (using Django)

What is the process of exporting a module that has been imported in ES6?

Material-UI: The `paperFullWidth` key passed to the classes prop is not supported within the WithStyles(ForwardRef(Dialog)) component

Building a Next.js application in a docker container on a local machine using minikube is successful, however, the build fails when attempting to build it on a staging environment

Choose the current parent item using Angular's ng-selected and $index

Customizing the jQuery Datepicker to only allow a predefined set of dates

What is the process for transforming an asynchronous method into a synchronous version?

Using JavaScript to listen for events on all dynamically created li elements

Guide to showcasing an image on an HTML page using HTTP header

Update the value of input within a Struts2 iterator by utilizing JavaScript

Content within a Row of a Data Table

Leveraging partials on their own

The Angular view fails to refresh after the second invocation of $compile