How do I filter data comparing greater than less than scenario in angular js

Question

0.00/5 (No votes)

See more:

I do have table which where i will have dropdown list which will have '<=, >=, =' option and another input field where user enter the value to filter. so it will be like if <= -1. >=0 , =1

How do i filter data in my table using angular js?

I tried to write a function and now it does not even populate table with initial data before filter.

What I have tried:

Item

Order

Line

Status

ToLocation

Qty

{{c}}

RegDate

{{c}}

{{p.Item}}
{{p.Order}}
{{p.Line}}
{{p.Status}}
{{p.ToLocation}}
{{p.Qty}}
{{p.RegDate}}

<div ng-controller="demoController">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td>Item<br />
                            <input type="text" ng-model="Search.Item" />
                        </td>
                        <td>Order<br />
                            <input type="text" ng-model="Search.Order" /></td>
                        <td>Line<br />
                            <input type="text" ng-model="Search.Line" /></td>
                        <td>Status<br />
                            <input type="text" ng-model="Search.Status" /></td>
                        <td>ToLocation<br />
                            <input type="text" ng-model="Search.ToLocation" /></td>
                        <td>Qty<br />
                            <table>
                                <tr>
                                    <td>
                                        <input type="text" ng-model="compValue"/>
                                    </td>
                                    <td>
                                        <select ng-model="compFilter" ng-change="onChange(compFilter,compValue)">
                                            <option ng-repeat="c in Comparers" value="{{c}}">{{c}}</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>RegDate<br />
                            <table>
                                <tr>
                                    <td>
                                        <input type="text" ng-model="dateFilter" />
                                    </td>
                                    <td>
                                        <select ng-model="compFilter" ng-change="onChange(compFilter,compValue)">
                                            <option ng-repeat="c in Comparers" value="{{c}}">{{c}}</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="p in Products |filter:Search">
                        <td>{{p.Item}}</td>
                        <td>{{p.Order}}</td>
                        <td>{{p.Line}}</td>
                        <td>{{p.Status}}</td>
                        <td>{{p.ToLocation}}</td>
                        <td>{{p.Qty}}</td>
                        <td>{{p.RegDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

Angualr code :

var app = angular.module("demoModule", []);

app.controller("demoController", function ($scope, $http) {

    $scope.Comparers = ['=', '>=', '<='];
    $scope.compValue = "";

    $http(
        {
            method: "POST",
            url: "ProdForm.aspx/GetProduct",
            data: {},
            contentType: "application/json",
            dataType: "json"

        }).then(function (response) {

            $scope.Products = JSON.parse(response.data.d);
            debugger;
        });

    $scope.onChange = function (compFilter, compValue, Products) {
       
            var newArray = new Array();
            if (compFilter === '=') {
               ;
               for (var i = 0; i < Products.length; i++) {
                    var j = 0;
                    if (Products[i].Qty == compValue) {
                        newArray[j] = Products[i];
                        j = j + 1
                    }
                }
            }
            else if (compFilter === '>=') {
               
                for (var i = 0; i < Products.length; i++) {
                    var j = 0;
                    if (Products[i].Qty >= compValue) {
                        newArray[j] = Products[i];
                        j = j + 1
                    }
                }
            }
            else {

                for (var i = 0; i < Products.length; i++) {
                    var j = 0;
                    if (Products[i].Qty >= compValue) {
                        newArray[j] = Products[i];
                        j = j + 1
                    }
                }
            }

            $scope.Products = newArray;
    }
});

Posted 12-Jul-17 19:19pm

gaurav.s23

Updated 13-Jul-17 4:58am

v5

Add a Solution

Comments

Karthik_Mahalingam 13-Jul-17 3:09am

can you host it in jsfiddle?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Accepted Answer · 2017-07-13T00:31:00

Solution 1

Well I knocked up a jsFiddle version myself: CodePerfect: Filter Issues[^]

So there are plenty of issues here, but let's highlight some basic ones

1: Loop counter reset
Your filter for loops:

JavaScript

for (var i = 0; i < $scope.Products.length; i++) {
        var j = 0;
        if ( $scope.Products[i].Qty >= compValue) {
          newArray[j] =  $scope.Products[i];
          j = j + 1
        }
      }

2: add to an array
so at the start of each loop it sets j = 0? do you want j to reset every loop?
newArray[j] why? Just do this:

JavaScript

let result = []
for(...){
  result.push(item)
}

No need to iterate through the result array. just add new items with a push.

3: welcome to Ecmascript6 (or javascript as you now it)
Check this out:

JavaScript

newArray = $scope.Products.filter(p=>p.Qty>=compValue)

did you just see that? wow :P

So here is your whole filter function so far (with switch)

JavaScript

$scope.onChange = function(compFilter, compValue) {
  $scope.Products = $scope.allProducts
  let newArray = [];
  switch(compFilter)
  {
      case '=':
    newArray = $scope.Products.filter(p=>p.Qty==compValue)
    break;
    case '>=':
    newArray = $scope.Products.filter(p=>p.Qty>=compValue)
    break;
    default:
    newArray = $scope.Products.filter(p=>p.Qty<=compValue)
    break;
  }
  $scope.Products = newArray;
}

I made a few small changes, but you get the idea.

We can go much further. You are using about 5% of angular's potential and about 0.1% of javascript. I will expand if you like. We can make this simple device very neat indeed

Posted 13-Jul-17 0:31am

Andy Lanng

Comments

[no name] 13-Jul-17 10:55am

Sir, thank you. but there is problem, I want filter such that it compares the value it gets in the input field and then filter the data as per comparer (>=, =, <=) and populate the table. its not doing it. So if you again check my html code in question which I have updated. I do my compare function work like search filter .

Andy Lanng 13-Jul-17 11:03am

try the new fiddle: https://jsfiddle.net/bxrwnb7z/1/
Let me know if this works for you

[no name] 13-Jul-17 11:20am

could not open the jsfiddle link

Andy Lanng 13-Jul-17 11:38am

whoops - fixed it
https://jsfiddle.net/bxrwnb7z/1/

Andy Lanng 13-Jul-17 11:04am

PS: to add code you can update the question. Just please add an "UPDATE" note to your changes ^_^

[no name] 13-Jul-17 11:33am

This is working sir. Now what is happening here is that, it does not reset back and filter again. I mean if there are 1,2,3,4,5,6,7 itemNum. now if first select itemNum >=5 it returns 5,6,7. but when I clean my txtbox and put <=3 it does not work in that scenario.

Andy Lanng 13-Jul-17 11:41am

It doesn't reset the filter because you are wiping over the original list each time. Check my fiddle. See how I do it.
1: take a copy of the first set (allProducts) - never change the first set.
2: use the second set (Products) to construct a new set (newArray)
3: change the second set (Products) to point at the new set instead of the origonal

[no name] 13-Jul-17 12:06pm

Yes sir, it is working in your code. but I do not but i did not get any clue how to implement in my code. As i am getting collection of JsonData and storing them in $scope.products object.
so how do i copy the set and attach them back to ng-repeat filter?

I am beginner in programming as you could see from my code. And this is first time i am working on front end web developement.

Andy Lanng 13-Jul-17 12:09pm

I have a function in my example called getTestProducts(12). That populates $scope.allProducts. This is never used for anything other than to refresh $scope.Products.
If you copy my code and populate $scope.allProducts from your ajax call, then it'll all work as mine

[no name] 13-Jul-17 12:23pm

I did same. its working but it never populates the data when page load. It only starts to show data when use the filter.

Andy Lanng 13-Jul-17 12:25pm

Make sure that you populate $scope.Products as soon as you have the data.

It may be that your angular app isn't triggering a refresh. There are ways to trigger one

[no name] 13-Jul-17 12:25pm

I found my mistake. I was assigning new collection object inside onChange function.

Thank you very much sir.

[no name] 14-Jul-17 1:58am

Sir, how do i compare dates in similar fashion? I tried but it did not work. My dates are saved as 07-14-2017 format in db.

Andy Lanng 14-Jul-17 4:05am

I think the best way is to cast them as dates, i.e. let d = new Date(p.date).

I would use a class and constructor to format the object after it has been deserialized. Look at the new jsFiddle for how to do it: jsFiddle.

Note how I convert my test to a string. This is just to simulate the data you will get from your json. I convert it to a date type in the constructor as you should

[no name] 14-Jul-17 9:58am

Sir, this is where I get my object collection as json.
$http(
{
method: "POST",
url: "ProdForm.aspx/GetProduct",
data: {},
contentType: "application/json",
dataType: "json"

}).then(function (response) {

$scope.Products = JSON.parse(response.data.d);
debugger;
});

now how do I iterate over them and cast them date like you have shown in JsFiddle. Could you show me in my code please.

Andy Lanng 14-Jul-17 10:43am

Ooh - you use another cool array feature called "map".
like this:
$scope.Products = JSON.parse(response.data.d).map(d=>new ProductClass(d));
How cool is that!

[no name] 14-Jul-17 11:48am

I got error in doing so. I think this is too advanced for my level. :D Thank you for showing me different world of front end scripting. I will study and try to find resource. but now. I simply want to filter the collection by passed comparer ite '>=' etc and date value entered. Like the way you have done in case of integer.