In ngTables, running $scope.tableParams.reload() for the third time results in TypeError: Cannot set property '$data' of null

Question

This error is in regards to the ngTable plugin for AngularJS.

I seem to be having a really weird error. Basically, I can run $scope.tableParams.reload() twice with no problem, but on the third execution, and every following one, I get the following error:

TypeError: Cannot set property '$data' of null at [removed]/ng-table.js:411:55

I believe this is all the relevant code, but if anything is missing let me know:

$scope.lookupAddress = function(address){       
    var url = 'https://blockchain.info/multiaddr?cors=true&active='+address;
    $scope.loading = true;
    $scope.clearTableData();
    $http.get(url).success(function(data){
        $scope.loading = false;
        $scope.loaded = true;
        $scope.loadError = false;
        glob = data;

        //I believe the next few for loops, and the assignment of transactions, is not relevant to finding the code.  That being said, I've included it because bugs hide where you least expect it.
        for (i = data.txs.length -1; i > -1; i-- ){
            var inputAddr = []; 
            for (z = 0; z < data.txs[i]['inputs'].length; z++){
                inputAddr.push(data.txs[i]['inputs'][z]['prev_out']['addr'])
            }
            var outputAddr = [];
            for (z = 0; z < data.txs[i]['out'].length; z++){
                outputAddr.push(data.txs[i]['out'][z]['addr'])
            }
            transactions[i] = {
                'Hash' : data.txs[i]['hash'],
                'Amount' : data.txs[i]['result'] / 100000000,
                'Balance' : data.txs[i]['balance'] / 100000000,
                'InputAddress' : inputAddr,
                'OutputAddress' : outputAddr,
                'Date' : timeConverter(data.txs[i]['time'])
            };
        };

        //You can also ignore this too... probably.
        $scope.output = {
            'BTC' : data.wallet.final_balance / 100000000, //Response in satoshi, so have to divide.
            'Address' : address,
            'Total Received': data.addresses[0].total_received / 100000000,
            'Total Sent': data.addresses[0].total_sent / 100000000,
            'Transactions' : transactions
        };
        //Enables new data to be loaded, e.g. on a new address.
        if ($scope.tableParams){
            $scope.tableParams.reload();
        } 
        data = transactions;
        $scope.tableParams = new ngTableParams({
            page: 1,            
            count: 5,           // items per page
            sorting: {
                Date: 'desc' 
            }
        }, {
            total: transactions.length, 
            getData: function($defer, params) {
                data = transactions;
                var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

            }
        });
    }).
    error(function(data){
        $scope.loadError = true;
    });
}

$scope.clearTableData = function(){
    transactions = [];
    $scope.output = {}
    if ($scope.tableParams){
            $scope.tableParams.reload();
    } 
}

Methylamine

The code you're using to get your data (which you've marked as potentially unrelated) really is irrelevant; the problem lies in the $scope.tableParams.reload() call. Suggested an edit, but it got rejected. – Triton

Answer 1

I know this is too late, but I thought better to comment on this for others who seeking for a answer for the same issue.

I also had the same issue and managed to fix by following the example in following URL.

https://github.com/esvit/ng-table/blob/master/src/scripts/04-controller.js

I just added the following code line into my code after 'ngTableParams' instance creation.

$scope.params.settings().$scope = $scope;

Quite

This helped me avoid the "null" error, but it's still not reloading the table content. I've got the reload in a different controller from the one in which I create the table. – Spermatogonium

Answer 2

Try adding:

,
$scope: { $data: {} }

after:

getData: function($defer, params) {
                data = transactions;
                var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

            }

Ecclesia

This won't work, as ng-table expects a real $scope, not a fake one. – Triton

Yeah, it helps avoid the error but won't update the data, which misses the point really. – Spermatogonium

Answer 3

I had the same problem. When you initialize ngTableParams, you need to specify all parameters: page, count, total, and counts, even if you are not using paging, because otherwise the $scope property of setting will be set to null somehow during merging all settings together.

Mccullers

Answer 4

I also faced the same problem and solved it by adding reload:

$scope.tableParams as below 
$scope.tableParams = new ngTableParams({
            page: 1,
            count: 25,
            ***reload: $scope.tableParams***
        },

Halting