title: AngularJS and big JSON data
body: <p>For a custom AngularJS application that uses data from an API I've been creating I've come across the use of <a href="http://oboejs.com/api" rel="nofollow noreferrer">Angular oboe</a>. Oboe is a bower package that helps streaming large JSON files to the view. So after some trial and error, I've managed to build a decent oboe <code>GET</code> method that obtains around 4000 JSON items in around 2 seconds. But my problem starts when adding more <code>GET</code> methods to the same view.</p>
  
  <p>At first there weren't any problems but eventually, the loading time keeps getting bigger and bigger. So I've tried using the Oboe <code>Cached: true</code> configuration. Sadly it doesn't work at all. Every time I load the page all the data is loaded again instead of obtained from the <code>browser Cache</code></p>
  
  <p>In my example below, you're able to see the structure of one of my oboe function's that I've been trying to cache. A JSfiddle link is added down below as well.</p>
  
  <p><strong>The Function and the view</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function createProduct(id, name) {
          this.id = id;
          this.name = name;
      }
  
      $scope.products = [];
  
      oboe({
          url: 'config/get/getProducts.php',
          method: 'GET',
          cached: true
      }).path('products.product.*', function () {
          // we don't have the person's details yet but we know we
          // found someone in the json stream. We can eagerly put
          // their div to the page and then fill it with whatever
          // other data we find:
      }).start(function () {
          console.log("start");
      }).node('products.product.*', function (products) {
          // we just found out their name, lets add it
              // to their div:
              $scope.products.push({
                  id: products.id,
                  name: products.name.language
              });
              $scope.totalItems = $scope.products.length;
              return new createProduct(products.id, products.name);
      }).done(function () {
          console.log( $scope.products );
      });
  
      // Refresh data
      $scope.refreshData = function() {
          cartService.refreshData()
              .then(function(response) {
                  $scope.cartItems = response.cartItems;
                  $scope.totalCartItems = response;
                  $scope.selectedCustomer = response;
              })
      };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="productimg col-lg-4 col-md-4" ng-repeat="product in products | limitTo : limit : (currentPage - 1) * limit track by product.id"
               ng-class="{lastItem: $last}" scroll-bottom="event"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12" ng-bind="product.id"&gt;&lt;/div&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;a ng-bind="product.name" href="{{product.id}}.nl"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-12 text-center margin-t-30"&gt;
              &lt;ul uib-pagination
                  total-items="totalItems"
                  ng-model="currentPage"
                  items-per-page="limit"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the <a href="https://jsfiddle.net/zb8y4g1s/1/" rel="nofollow noreferrer">JSfiddle</a> You're able to see the code. I couldn't get the JSON to work on on JSfiddle but see it as the following line but then around 10000 "product" rows.</p>
  
  <pre><code>{"products":{"product":[{"id":"1240","id_manufacturer":"0","id_supplier":"0","id_category_default":"2","id_tax_rules_group":"8","quantity":"0","id_shop_default":"1","reference":{},"ean13":"0","price":"0.000000","active":"0","date_add":"2014-07-15 12:06:34","date_upd":"2018-04-21 12:22:37","name":{"language":"zie voorschot factuur 03"}},{"id":"1241","id_manufacturer":"0","id_supplier":"0","id_category_default":"2","id_tax_rules_group":"8","quantity":"0","id_shop_default":"1","reference":{},"ean13":"0","price":"0.000000","active":"0","date_add":"2014-07-15 12:06:41","date_upd":"2018-04-21 12:22:37","name":{"language":"zie voorschot factuur 04"}},{"id":"8908","id_manufacturer":"0","id_supplier":"15","id_category_default":"2","id_tax_rules_group":"8","quantity":"0","id_shop_default":"1","reference":"041002","ean13":"5712084210057","price":"45.454545","active":"1","date_add":"2015-11-12 18:03:47","date_upd":"2017-11-18 09:57:27","name":{"language":"Vaavud Sleipnir smartphone wind meter"}}}}
  </code></pre>
  
  <p>So the real struggle I'm facing is that getting the data from the network tab takes around ten seconds. (there is an API request at "getProducts.php"). Then parsing that to the view costs around 30 seconds. (way too long). Secondly, I would like to cache the getProducts request so that the products are directly obtained the next time the view is loaded. With a normal <code>$http.get()</code> and <code>cache: true</code>. It worked but then I'm still facing the slow binding, even with Oboe.</p>
  
  <p>If there is any more information needed please let me know in the comments below.</p>
  
  <p>As always, thanks in advance! </p>