How to display limited data using Angular.js?

Question

I have seen enough examples on how to display the limited results using limitTo. But unfortunately it isn't working as expected. Currently, it is displaying the entire list but I want to limit it to only 8 key,value items in 4/4 blocks.

Here is the plnkr.

  <ul>
      <li ng-repeat="(key,value) in stocks |limitTo :8">
            {{key +" "+ value}}
      </li>
  </ul>

 <script>
    var app = angular.module('smallcaseApp', []);
    app.controller('stockCtrl', function($scope, $http) {
    $http.get("data.json").then(function(response) {
        $scope.stocks = response.data.price;
      });
    });
 </script>

As per the docs over here: docs.angularjs.org/api/ng/filter/limitTo, the input type can be Array/array-like, string or number. It does not work with the js object. — Prerak Sola
– Prerak Sola, Commented Jul 4, 2017 at 15:33

Shantanu · Accepted Answer · 2017-07-04 18:23:44Z

1

For limitTo input should be either array or string/number. You need to create custom filter to handle it. Here's working plunk for your issue

app.filter('objLimitTo', [function(){
return function(obj, limit){
    if(obj){
      var keys = Object.keys(obj);
      if(keys.length < 1){
        return [];
      }
    }

    var result = {},
    count = 0;
    angular.forEach(keys, function(key){
        if(count >= limit){
            return false;
        }
        result[key] = obj[key];
        count++;
    });
    return result;
};
}]);

http://plnkr.co/edit/8d3gUqg4vHeGQWUXYrat?p=preview

edited Jul 4, 2017 at 18:23

answered Jul 4, 2017 at 15:56

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

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

Comments

Rajesh Dan · Accepted Answer · 2017-07-04 15:26:54Z

0

First of all your plunkr is not working, angular js link should be above any other js (your app js).

You are iterating in a Object, for using limitTo here there's already a working good example, please take a look SO Link

answered Jul 4, 2017 at 15:26

Rajesh Dan

4677 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to display limited data using Angular.js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related