Using the AngularJS limitTo filter in ngRepeat for an object acting as a dictionary

Question

Using the AngularJS limitTo filter in ngRepeat for an object acting as a dictionary

Can the limitTo filter be used on a ngRepeat directive that is iterating over the properties of an Object instead of items in an Array?

Although it is stated in the official documentation that the limitTo input should be an array or string, I am curious if there might be a way to make this work.

For reference, here is a snippet of the code:

<li ng-repeat="(key, item) in phones_dict |orderBy:'-age'| limitTo:limit_items"></li>

Where $scope.phones_dict represents an Object structured like this:

{ 
     item_1: {name:"John", age: 24},
     item_2: {name:"Jack", age: 23}
}

javascript angularjs angularjs-ng-repeat angularjs-filter

Answer 1

Answer №1

Utilizing limitTo is effective for strings and arrays, but when dealing with objects, it's best to create your custom filter like this:

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

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

For a demonstration, check out the fiddle here: http://jsfiddle.net/wk0k34na/2/

Answer 2

Utilizing limitTo is effective for strings and arrays, but when dealing with objects, it's best to create your custom filter like this:

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

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

For a demonstration, check out the fiddle here: http://jsfiddle.net/wk0k34na/2/

Answer 3

Answer №2

After experimenting, I discovered a solution:

 ng-if="$index < limit"

By including the above code in the ng-repeat tag, I was able to achieve the desired outcome. While this method may not be considered conventional, it worked for me.

Answer 4

After experimenting, I discovered a solution:

 ng-if="$index < limit"

By including the above code in the ng-repeat tag, I was able to achieve the desired outcome. While this method may not be considered conventional, it worked for me.

Answer 5

Answer №3

Another possible solution is to utilize 'track by $index'... This way, your limitTo function should look like this:

limitTo: $index == 5 (or any other number)

Answer 6

Another possible solution is to utilize 'track by $index'... This way, your limitTo function should look like this:

limitTo: $index == 5 (or any other number)

Answer 7

Answer №4

The updated limitTo filter now includes support for array-like objects (view example) starting from version 1.5.7.

Answer 8

The updated limitTo filter now includes support for array-like objects (view example) starting from version 1.5.7.

Using the AngularJS limitTo filter in ngRepeat for an object acting as a dictionary

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

How to resolve CORS issues in an AngularJS, Spring Boot, and Nginx setup

Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Ideas and Recommendations for Building a Laravel and Vue.js Hybrid Structure for MPA/SPA Applications

What is the purpose of using the variable "header_row || 1" in App Script?

Trouble Loading HTML Template Post Email Dispatch in Django

Utilize the power of Facebook login in your Parse client side application by integrating it with the user object

Accessing the next and previous elements using jQuery

merge various useState functions for appending values to an array into a unified function in a React component

Avoiding leaps through the use of dynamic pictures?

Retrieving JSON data and showcasing it in HTML components

Angular: What is the best way to pass usersearch-input data to a different component and use it to generate a list of search results?

Using Node.js, Handlebars, and Express for template inheritance

Struggling with uploading files in AngularJS?

What is the best way to change an image using JavaScript?

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Having Multiple Login Forms on a Single Page

What is preventing the X-Powered-By Header from being disabled even after implementing helmet security measures?

Attributes for 'v-bind' directives must have a value specified

Obtaining an array of weeks for the previous two months from the current date using JavaScript