AngularJS Table filter

Question

I'm trying to use angularJS to filter data in a table. I need to load the data from a json file which looks like this(sample file)

[{name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}];

Here's my HTML file:

    <!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>

<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />



 <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

<body ng-app="main" ng-controller="DemoCtrl">


    <table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="tests in test ">

        <td data-title="'Date'">
            {{test.date}}
        </td>
        <td data-title="'Computer/Server Name'">
            {{test.deviceName}}
        </td>
        <td data-title="'username'" filter="{ 'name': 'text' }">
            {{test.name}}
        </td>
        <td data-title="'Device Type'">
            {{test.deviceType}}
        </td>
    </tr>
</table>

</body>
</html>

here's the script.js file

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($http, $scope, $filter, ngTableParams) {
    $http.get('test.json')
       .then(function(res){
          var data = res.data; 
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 1000000000000000000,          // count per page
    filter: {
        name: ''       // initial filter
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.filter() ?
               $filter('filter')(data, params.filter()) :
               data;                   

        $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve($scope.users);
    }

});alert(data);
}); 
});

The file is getting read as the alert function returns all data however nothing is showing in the table.

roxid · Accepted Answer · 2015-04-13 13:54:31Z

1

Your Json was invalid, All the properties should be wrapped in " double quotes

[
    {
        "name": "Moroni",
        "age": 50,
        "deviceName": "test"
    },
    {
        "name": "Tiancum",
        "age": 43,
        "deviceName": "test"
    },
    {
        "name": "Jacob",
        "age": 27,
        "deviceName": "test"
    },
    {
        "name": "Nephi",
        "age": 29,
        "deviceName": "test"
    }
]

Also you should bind data retrieved from Ajax to $scope.tables

Working Plunkr

edited Apr 13, 2015 at 13:54

roxid

5034 silver badges15 bronze badges

answered Apr 13, 2015 at 13:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

MQC Over a year ago

changed html from <tr ng-repeat="test in tests "> to: <tr ng-repeat="test in $data "> and it works. Thanks!

Reena · Accepted Answer · 2015-04-13 12:38:40Z

0

Use

<tr ng-repeat="tests in test ">

    <td data-title="'Date'">
        {{tests.date}}
    </td>
    <td data-title="'Computer/Server Name'">
        {{tests.deviceName}}
    </td>
    <td data-title="'username'" filter="{ 'name': 'text' }">
        {{tests.name}}
    </td>
    <td data-title="'Device Type'">
        {{tests.deviceType}}
    </td>
</tr>

answered Apr 13, 2015 at 12:38

Reena

1,1199 silver badges17 bronze badges

2 Comments

Reena Over a year ago

Where did you declare test in controller?? Can u share your code in plunker

Reena Over a year ago

There is no date and no server name in your json file, then from where you are fetching these, you are fetching your data only from json file wright????

Collectives™ on Stack Overflow

AngularJS Table filter

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related