title: Laravel API - Pulling large amounts of data (json)
body: <p>I’ve created an API in my Laravel app to pull all my clients (3000+) details so I can use my AngularJS autocomplete form to search for their name/address/phone number etc.</p>
  
  <p>The API outputs about 1,000Kb of client data (json). If I don’t fetch all the data, I could think that a client doesn’t exist when typing his name in the search box, so I would like to be able to load them all.</p>
  
  <p>Everything work fine, but a 1,000Kb download is a slow. AngularJS handle this well though. And what if I had 10,000 clients?</p>
  
  <p>Where should I look to increase the performance of this fetch:</p>
  
  <ul>
  <li>Laravel Eloquent query, is there a way to get the data in chucks in this situation?</li>
  <li>Php (gzip) to reduce the size of the pulled data?</li>
  <li>AngularJS to work as soon as the first row is downloaded?</li>
  </ul>
  
  <p>Here is the code I use:</p>
  
  <p>API Controller</p>
  
  <pre><code>public function index()
  {
      $clients = Client::where('business_id', '=', \Auth::user()-&gt;business_id)-&gt;orderBy('updated_at', 'DESC')-&gt;get();
  
      return  Response::json([
         'clients' =&gt; $this-&gt;transformClientCollection($clients)
      ], 200);
  }
  
  public function transformClientCollection($clients)
  {
      return array_map([$this, 'transformClient'], $clients-&gt;toArray());
  }
  
  public function transformClient($clients)
  {
  
      return [
          'clientid' =&gt; $clients['id'],
          'first_name' =&gt; $clients['first_name'],
          'last_name' =&gt; $clients['last_name'],
          'address_1' =&gt; $clients['address_1'],
          'address_2' =&gt; $clients['address_2'],
          'city' =&gt; $clients['city'],
          'state' =&gt; $clients['state'],
          'postal_code' =&gt; $clients['postal_code'],
          'phone_number_1' =&gt; $clients['phone_number_1'],
          'phone_number_2' =&gt; $clients['phone_number_2'],
          'email' =&gt; $clients['email']
      ];
  }
  </code></pre>
  
  <p>AngularJS (html file)</p>
  
  <pre><code>&lt;div ng-app="instantsearch"&gt;
      &lt;div ng-controller="instantSearchCtrl"&gt;
  
          &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;input type="text" class="form-control search" ng-model="searchString" placeholder="Enter your search terms" /&gt; 
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row data-ctrl" ng-repeat="i in items | filter:searchString | limitTo:20 "&gt;
            &lt;div class="col-sm-12"&gt;
             @{{ i.first_name }} @{{ i.last_name }} @{{ i.address_1 }} @{{ i.address_2 }} @{{ i.city }} @{{ i.state }} @{{ i.phone_number_1 }} @{{ i.phone_number_2 }} @{{ i.email }}
            &lt;/div&gt;             
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AngularJS (JS file)</p>
  
  <pre><code>var app = angular.module('instantsearch',[]);
  
  app.controller('instantSearchCtrl',function($scope,$http,$location){
  
      var urlapiclients = $location.protocol() + "://" + $location.host() + "/api/clients" ;
  
      $http.get(urlapiclients).success(function(data, status, headers, config) {
          $scope.items = data.clients;
  
      }).error(function(data, status, headers, config) {
          console.log("No data found..");
    });
  });
  
  
  app.filter('searchFor', function(){
      return function(arr, searchString){
          if(!searchString){
              return arr;
          }
          var result = [];
          searchString = searchString.toLowerCase();
          angular.forEach(arr, function(item){
              if(item.first_name.toLowerCase().indexOf(searchString) !== -1){
              result.push(item);
          }
          });
          return result;
      };
  }); 
  </code></pre>
  
  <p>JSON output</p>
  
  <pre><code>   "clients":[
        {
           "clientid":4981,
           "first_name":"Sid",
           "last_name":"Hodkiewicz",
           "address_1":"6659 Hackett Ways",
           "address_2":"",
           "city":"New Estherville",
           "state":"Tennessee",
           "postal_code":"27281-0870",
           "phone_number_1":"00700300842",
           "phone_number_2":"",
           "email":"hNitzsche@Stokes.biz"
        },
        {
           "clientid":4982,
           "first_name":"Braulio",
           "last_name":"Bechtelar",
           "address_1":"7558 Anne Land Suite 876",
           "address_2":"",
           "city":"Rauview",
           "state":"Alabama",
           "postal_code":"01837-9601",
           "phone_number_1":"1-017-001-8215",
           "phone_number_2":"",
           "email":"nBaumbach@gmail.com"
        },
        {
           "clientid":4983,
           "first_name":"Loma",
           "last_name":"Dibbert",
           "address_1":"805 Jones Fields Suite 411",
           "address_2":"",
           "city":"Lake Billychester",
           "state":"New Jersey",
           "postal_code":"69315-4595",
           "phone_number_1":"(691)511-6275x891",
           "phone_number_2":"",
           "email":"dHegmann@Bashirian.net"
        },
        {
           "clientid":4984,
           "first_name":"Verla",
           "last_name":"Schulist",
           "address_1":"89529 Bode Village Suite 344",
           "address_2":"",
           "city":"West Jessy",
           "state":"Virginia",
           "postal_code":"69116",
           "phone_number_1":"(248)211-3643",
           "phone_number_2":"",
           "email":"Friesen.Ruthie@Hand.biz"
        },
        {
           "clientid":4985,
           "first_name":"Jimmie",
           "last_name":"Fadel",
           "address_1":"4355 Marquardt Heights",
           "address_2":"",
           "city":"South Conrad",
           "state":"District of Columbia",
           "postal_code":"55751",
           "phone_number_1":"(414)901-2495",
           "phone_number_2":"",
           "email":"Koepp.Wayne@yahoo.com"
        }
  </code></pre>