Filter column data of table in angularjs

Question

I am new to angularjs and learning day by day but somehow I cannot figure out to filter this data to show in table.

In partial, Fail and Success

I want to show that data which has 1 before separator '|'

Ex in Success cell: 1|12311 0|2122 shows result 12311

Original table

Result table

<table class="table table-condensed" border ="1" align="center">
<tr>
<th>Job Id</th>
<th>Job Type</th>
<th>Nb of Urls</th>
<th>Size of Page</th>
<th>Bytes</th>
<th>Site Id</th>
<th>Partial</th>
<th>Fail</th>
<th>Success</th>
</tr>
<tr ng-repeat="detailData in detailObject"> 
<td>
<span ng-bind="detailData.jobId"></span>
</td>
<td>
<span ng-bind="detailData.jobType"></span>
</td>
<td>
<span ng-bind="detailData.Date"></span>
</td>
<td>
<span ng-bind="detailData.countUrl"></span>
</td>
<td>
<span ng-bind="detailData.countBytes"></span>
</td>
<td>
<span ng-bind="detailData.sid"></span>
</td>
<td>
<span ng-bind="detailData.countPartial  | filter: scidStatusFilter"></span>
</td>
<td>
<span ng-bind="detailData.countFail"></span>
</td>
<td>
<span ng-bind="detailData.countSuccess"></span>
</td>
</tr>
</table>

// Input JSON

{
  "statusCode": 200,
  "message": "Getting Data",
  "data": [
    {
      "jobId": "2~27-4-2017~10:46:27",
      "sid": 1,
      "jobType": "mode",
      "date": "2017-04-14T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:2:58",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:7:57",
      "sid": 2,
      "jobType": "ondemand",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~12:19:16",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    }
  ]
}

Mistalis · Accepted Answer · 2017-04-28 09:31:50Z

2

You can do it by writting a custom function testing the value for you:

<table>
    ...
    <td>{{ successValue(detailData.countSuccess) }}</td>
/<table>

And in your scope, define successValue function:

$scope.successValue = function(val) {
    if(val.substring(0,2) == '1|') return val.slice(9);
    else return val;
}

Note 1: You could probably improve successValue() by testing a regex for it, but I'm not a good regex-writter. I just try to explain in this answer what could be the Angular way do to it.

Note 2: You are not forced to use ng-bind each time you want to display a value from your controller. You can change all:

<td>
    <span ng-bind="detailData.jobId"></span>
</td>

To:

<td>{{detailData.jobId}}</td>

edited Apr 28, 2017 at 9:31

answered Apr 28, 2017 at 7:30

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

3 Comments

raj Over a year ago

substring spell mistake and separator '|' is coming so slice shifted to 9 to get result

Mistalis Over a year ago

@Creator Fixed, my bad. Does the rest of the answer fits your needs?

raj Over a year ago

Well not perfectly upto certain extant thanks for your concern.

raj · Accepted Answer · 2017-04-28 09:22:56Z

0

I followed this approach and I want my answer like this way. //html side

<td>
  <span ng-bind=" successValue(detailData.countPartial) "></span> 
</td>

//js side

$scope.successValue = function(val) {
                var aOuterData = [];
                var aInnerData = [];
                var scidData = [];
                aOuterData = val.split(' ');
                angular.forEach(aOuterData,function(val){
                aInnerData = val.split('|');
                if(aInnerData[0]>0){
                scidData.push(aInnerData[1]);
                }
                })
                return scidData.join(',');
            }

answered Apr 28, 2017 at 9:22

raj

3885 silver badges24 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2017-04-28 09:24:52Z

Try this line of code :

if(item.countSuccess.indexOf('1|') != '-1') {
  item.countSuccess = item.countSuccess.substring(item.countSuccess.indexOf('1|')+2, item.countSuccess.indexOf('0|')-1);
}

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.detailObject = [
    {
      "jobId": "2~27-4-2017~10:46:27",
      "sid": 1,
      "jobType": "mode",
      "date": "2017-04-14T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:2:58",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:7:57",
      "sid": 2,
      "jobType": "ondemand",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~12:19:16",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    }
  ];
  
$scope.detailObject.map(function(item) {
   if(item.countSuccess.indexOf('1|') != '-1') {
     item.countSuccess = item.countSuccess.substring(item.countSuccess.indexOf('1|')+2, item.countSuccess.indexOf('0|')-1);
   }
});

console.log($scope.detailObject);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="table table-condensed" border ="1" align="center">
<tr>
<th>Job Id</th>
<th>Job Type</th>
<th>Nb of Urls</th>
<th>Size of Page</th>
<th>Bytes</th>
<th>Site Id</th>
<th>Partial</th>
<th>Fail</th>
<th>Success</th>
</tr>
<tr ng-repeat="detailData in detailObject"> 
<td>
<span ng-bind="detailData.jobId"></span>
</td>
<td>
<span ng-bind="detailData.jobType"></span>
</td>
<td>
<span ng-bind="detailData.Date"></span>
</td>
<td>
<span ng-bind="detailData.countUrl"></span>
</td>
<td>
<span ng-bind="detailData.countBytes"></span>
</td>
<td>
<span ng-bind="detailData.sid"></span>
</td>
<td>
<span ng-bind="detailData.countPartial  | filter: scidStatusFilter"></span>
</td>
<td>
<span ng-bind="detailData.countFail"></span>
</td>
<td>
<span ng-bind="detailData.countSuccess"></span>
</td>
</tr>
</table>
</div>

Cannot read property 'map' of undefined its ok Rohit my problem is solved I have mentioned my answer above

Immanuel Kirubaharan · Accepted Answer · 2017-04-28 08:11:19Z

-1

If your First character will be the dynamic value the you can try the below function,

Template:

<table>
    ...
    <td>{{ successValue(detailData.countSuccess) }}</td>
/<table>

Controller:

$scope.successValue = function(val) {
    return val.split('|')[0];
}

Note: I've taken "Mistalis" Answer to make it dynamic.

answered Apr 28, 2017 at 8:11

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Filter column data of table in angularjs

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related