AngularJS Search with a big database

Question

I have this kind of problem, I have my database with 600k results, I have a web service REST created by me, so I have file json of my request query. Now I have my json file in my angular app mobile, but with my coding it freeze so much because, I take all entire file json and do a listbox and after show entire listbox i can search, when I type anything it freeze, and my search work in real-time, I don't care if i lost this functionality, I want to search without freeze, but i don't know how to solve this problem.

I have my db mysql, and a sample result of my request is this(JSON):

[
  {
    "date": "2009-02-14",
    "pool": 2,
    "timing": "H",
    "federation": "A2",
    "id_race": 73633,
    "id_com": 91
  },
  {
    "date": "2009-02-14",
    "pool": 2,
    "timing": "J",
    "federation": "A2",
    "id_race": 7348,
    "id_com": 91
  },
  {
    "date": "2009-02-14",
    "pool": 2,
    "timing": "J",
    "federation": "A2",
    "id_race": 2397,
    "id_com": 223
  },
  ...
]

My AngularJS controller html is this:

    <div ui-content-for="title">
    <span class="small">Search:<input ng-model="query"></span>
</div>
<div class="scrollable">
    <div class="scrollable-content">
        <div class="list-group">
            <div class="list-group-item" ng-repeat="race in raceList | filter:query">
                <br />
                <span>{{race.date}} - {{race.federation}} - {{race.pool}} - {{race.timing}}</span>
            </div>
        </div>
    </div>
</div>

And my controller js is this:

'use strict';

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

raceControllerModule.controller('raceController',
    ['$scope', '$routeParams', 'appService', function($scope, $routeParams, appService) {

        $scope.raceList = [];

        appService.newRacePromise().then(function (response) {
            $scope.raceList = response.data;
        });

    }]);

when I search i'd like to no freeze so somethings like I before type and with a button take my results, the search can be done from date or pool or federation.

EDIT: appService.js

'use strict';

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

appServiceModule.factory(‘appService', ['$http', function ($http) {

    var BASE_URL_ = "../api/";

    var service = {};

    service.newRacePromise = function () {
        return $http.get(BASE_URL_ + 'races’);
    };

    return service;
}]);

you had to implement a pagination mechanism, you cant send and elaborate all results if the resultset has 600k items! — fantarama, Jul 07 '15 at 09:22
Do a database query on the 600k results before pulling them into your front end — Jonathon Blok, Jul 07 '15 at 09:30
change your rest service, it must accept a range (start/end) and the query parameter. Then fetch only the number of items user can see on device, on user scroll icrease the range and fetch again, look at `infinite-scroll` directive on github — fantarama, Jul 07 '15 at 09:34
@JonathonBlok yeah but which query? exist a query for search from a text to a multiple value? example: I type "2009" and he found me all races of 2009, If i write "A2" he take me all races of A2 etc.. — Kuro Ashi, Jul 07 '15 at 09:34
@fantarama very a good idea but, i can do a query for search different column? as i write to Jonathon? — Kuro Ashi, Jul 07 '15 at 09:42
@KuroAshi `where table.field1 like 'myvalue' or table.field2 like 'myvalue'` where is the problem? If you have a lot of fields you could have some performance issue, (query optimization is always a work to do), make a live search on client on big sets of data has always performance issues and must be avoided — fantarama, Jul 07 '15 at 09:48
Possible duplicate of [AngularJS and web workers](http://stackoverflow.com/questions/16713925/angularjs-and-web-workers) — Paul Sweatte, Aug 16 '16 at 15:54

score -1 · Answer 1 · answered Mar 04 '17 at 05:04

-1

Go for Ajax search with page limit .You don't have to show all 600 k records in a single page.

answered Mar 04 '17 at 05:04

jenil christo

666
8
16

AngularJS Search with a big database

1 Answers1