CODEWITHSUNDEEP
javascripthtmlangularjs
MQC
MQC

Reputation: 69

AngularJS Table filter

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.

Upvotes: 2

Views: 213

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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

Upvotes: 1

Reena
Reena

Reputation: 1119

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>

Upvotes: 0

Related Questions