How to avoid loading whole data while searching in Angular

Question

I search through large data using AngularJS only when I type >3 chars in input.

var app = angular.module('test_table', []);
app.controller('main_control',function($scope, $http){
    $scope.inputChange = function(){
        if($scope.search.length > 3){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=data; 
            });
        }
        if($scope.search.length < 4){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=""; 
            });
        }
    }       
});

HTML code:

<input type="search" class="inputsearchform" ng-model="search" ng-change="inputChange()"/>
...
<tr class="rowR" ng-repeat="data in loaded | filter:{song_name: search}">

I have problem. When I type more than 3 chars and then delete everything using default button in input, the whole data is loaded to the page, and it cause a big delay. How to deal with it?

ltalhouarne · Accepted Answer · 2016-03-25 13:30:36Z

3

You could add the following:

if($scope.search.length == 0){
      $scope.loaded=""; 
}

or create a function triggered by the delete button:

$scope.delete = function(){ 
      $scope.loaded=""; 
}

PS: You shouldn't call a service if you are going to assign an empty variable:

        if($scope.search.length < 4){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=""; 
            });
        }

should really be:

        if($scope.search.length < 4){
                $scope.loaded=""; 
        }

PS 2: if($scope.search.length < 4) doesn't really make sense either because if there are 3 chars - this if statement would be satisfied as eluded to by @aw04

edited Mar 25, 2016 at 13:30

answered Mar 25, 2016 at 13:27

ltalhouarne

4,6382 gold badges25 silver badges32 bronze badges

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

2 Comments

aw04 Over a year ago

Is there a reason not to just remove the http call on < 4 rather than create another condition? I can't see the point in it

Lev Over a year ago

Yes, my mistake. Thanks for help!

ashfaq.p · Accepted Answer · 2016-03-25 13:28:36Z

1

In order to avoid the delay, you will have to limit the data you are rendering.For this you can use the angular filter limitTo. Set the limitTo to any value which you want to load for default.

answered Mar 25, 2016 at 13:28

ashfaq.p

5,49723 silver badges36 bronze badges

7 Comments

aw04 Over a year ago

if you're trying to limit the data for performance reasons, it would make more sense to limit it on the server

Lev Over a year ago

@aw04 what do you mean by this? Because I want to increase performance. What can you advise for it?

aw04 Over a year ago

@LevS So what this answer is saying is to limit the data, which would mean you need to add paging or some sort of load more functionality. My point was that doing this in angular wouldn't help as much because you're still loading all the data from the server, which likely takes much more time than the rendering

aw04 Over a year ago

@LevS Having said that, if you build something into your server to only grab x records at a time (then again, paging or load more), this could potentially improve performance considerably

aw04 Over a year ago

@LevS More or less, yes. You can research server side paging and see if it's a fit for what you're doing. I would only recommend this if your performance problem is a result of the amount of data coming from the server.

|

Collectives™ on Stack Overflow

How to avoid loading whole data while searching in Angular

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related