Browser crashed when angularjs supply data on HTML datalist

Question

I have a html datalist that supplies list of account name which around 14k+, it works fine but any browser that I used will not respond first then successfully supplied the data in datalist using ng-repeat. In worst case the browser crashed.

C# backend

public JsonResult getCollateralAccount() {
       List<collateralAccount> accountlist = new List<collateralAccount>();
       sqlHelper = new QueryHelper();
       SqlParameter[] parameterList = { };
       var table = sqlHelper.ExecuteQuery("collateralGetListOfAccount", System.Data.CommandType.StoredProcedure, parameterList).Tables[0];
       accountlist = table.AsEnumerable().Select(row => new collateralAccount
              {
                  Id = row.Field<int>("Id"),
                  name = row.Field<string>("name")
              }).ToList();

      return new JsonResult { Data = accountlist, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

Service

getCollateralAccount: function (data) {
    var $getCollateralAccount = $http.get('/Collatera/getCollateralAccount').
    success(function (data) {
         return data;
    });
    return $getCollateralAccount;
}

Controller

$scope.listofCAccount = [];
CollateralService.getCollateralAccount().then(function(msg){
    if(msg.data.length>0){
       $scope.listofCAccount = msg.data;
    }
});

View

<input id="username" type="text" class="form-control width100" list="UsersName" ng-model="user.name" required/>
<datalist id="UsersName">
      <option ng-repeat="acc in accListContainer track by $index" value="{{acc.name}}" data-val="{{acc.name}}"></option>
</datalist>

Can anyone help me how to stop my browser from crashing or not responding?

score 0 · Answer 1 · answered Jun 02 '17 at 02:06

0

success/error has been deprecated, also you are using then at your controller, so just change your service as below(return Promise of $http.get directly).

getCollateralAccount: function (data) {
  return $http.get('/Collatera/getCollateralAccount');
}

answered Jun 02 '17 at 02:06

Pengyy

37,383
15
83
73

I already did it @Pengyy but the browser always not responding but this time it recovers fast than last time – pryxen Jun 02 '17 at 04:48
@pryxen there are too many data, maybe you should consider using pagination or virtual-scroll. :-) – Pengyy Jun 02 '17 at 05:06
well i can't use any of that coz my client wants auto-complete when they type in input field and datalist is a good solution but it keeps on not responding but it only took 30sec before responding again :( – pryxen Jun 02 '17 at 05:27
the crashing of browser happens when angularjs binds the data to the datalist using the ng-repeat ;( – pryxen Jun 02 '17 at 05:47
@pryxen this is not issue about `ng-repeat`, all things will go the same if the data is too much. and for auto-complete, I think maybe `TOP 10 or 20` will be enough. – Pengyy Jun 02 '17 at 06:02

score 0 · Answer 2 · answered Jun 02 '17 at 08:28

14K result in an ng-repeat is for sure not what any user would like to see.
You could try limitTo filter if this applies to you. You can use it like this:

ng-repeat="acc in accListContainer | limitTo:10 track by $index"

For more interesting approaches see: How to improve performance of ngRepeat over a huge dataset (angular.js)?

Browser crashed when angularjs supply data on HTML datalist

2 Answers2