Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Question

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Imagine I have an array containing keys in a specific order

orderedItems=["apple","banana","orange];

and there is a JSON object that I want to display using ng-repeat but following the sequence specified in the array:

{"fruits":
    {
    "apple":{
        "color":"red",
        "taste":"sweet"
        },
    "banana":{
        "color":"yellow",
        "taste":"creamy"
        }, 
    "orange":{
        "color":"orange",
        "taste":"citrusy"
        }
    }
}

How can I create a filter so that ng-repeat lists the fruits in the exact order as they are mentioned in the array?

<li ng-repeat="item in fruits | customOrder"></li>

javascript arrays angularjs angularjs-ng-repeat angularjs-filter

Answer 1

Answer №1

If you want to create a custom filter, follow these steps:

View the example on Plunker: http://plnkr.co/edit/fiuuGoGZK7tM5oefKQlS

Here is the code for index.html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>Filter Example</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5f50594b525f4c10544d7e0f100c1046">[email protected]</a>" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<li ng-repeat="person in people|orderNames:orderedNames track by $index">{{person.hair}}</li>
</body>

</html>

And here is the content of app.js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.people={
        bob:{
            hair:"brown",
            eyes:"blue",
            height:"tall"
        },
        sarah:{
            hair:"blonde",
            eyes:"blue",
            height:"short"
        },
        mike:{
            hair:"red",
            eyes:"blue",
            height:"tall"
        }
    };
    $scope.orderedNames=["mike","bob","sarah"];

});

app.filter("orderNames",function(){
    return function(input,sortBy) {
        var ordered = [];
        for (var key in sortBy) {
            ordered.push(input[sortBy[key]]);
        }

        return ordered;
    };
});

Answer 2

If you want to create a custom filter, follow these steps:

View the example on Plunker: http://plnkr.co/edit/fiuuGoGZK7tM5oefKQlS

Here is the code for index.html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>Filter Example</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5f50594b525f4c10544d7e0f100c1046">[email protected]</a>" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<li ng-repeat="person in people|orderNames:orderedNames track by $index">{{person.hair}}</li>
</body>

</html>

And here is the content of app.js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.people={
        bob:{
            hair:"brown",
            eyes:"blue",
            height:"tall"
        },
        sarah:{
            hair:"blonde",
            eyes:"blue",
            height:"short"
        },
        mike:{
            hair:"red",
            eyes:"blue",
            height:"tall"
        }
    };
    $scope.orderedNames=["mike","bob","sarah"];

});

app.filter("orderNames",function(){
    return function(input,sortBy) {
        var ordered = [];
        for (var key in sortBy) {
            ordered.push(input[sortBy[key]]);
        }

        return ordered;
    };
});

Answer 3

Answer №2

Here's a suggestion you might want to consider

<li ng-repeat="name in orderNames">
    {{people[name]}}
</li>

Answer 4

Here's a suggestion you might want to consider

<li ng-repeat="name in orderNames">
    {{people[name]}}
</li>

Answer 5

Answer №3

Using an array as a reference:

Check out this link for more information on arrays

    $scope.persons = {
   bob:{
     name:'bob'
   },
   mike:{
     name: 'mike'
   },
   sarah: {
     name: 'sarah'
   }
 };

 $scope.orderedNames = [$scope.persons.mike, $scope.persons.bob, $scope.persons.sarah];

HTML :

<ul ng-repeat="person in orderedNames">
         <li>{{ person.name }}</li>
       </ul>

Answer 6

Using an array as a reference:

Check out this link for more information on arrays

    $scope.persons = {
   bob:{
     name:'bob'
   },
   mike:{
     name: 'mike'
   },
   sarah: {
     name: 'sarah'
   }
 };

 $scope.orderedNames = [$scope.persons.mike, $scope.persons.bob, $scope.persons.sarah];

HTML :

<ul ng-repeat="person in orderedNames">
         <li>{{ person.name }}</li>
       </ul>

Answer 7

Answer №4

when you need to iterate over an array in a different order specified by another array, follow these steps:

Firstly, set up the following code snippet in your controller:

$scope.sortOrder = [1,2,3,4] //or any desired sorting order

Next, in your template, use the following syntax:

| orderByCustom:sortOrder:true/false

The true/false flag determines whether items not present in the sorting array will be displayed at the end or excluded altogether.

Don't forget to implement the custom filter as shown below:

var app = angular.module("app", []).filter("orderByCustom", function () {
            return function (input, sortOrder, includeOrphans) {
                //sorts by specified array and places unsorted items at the end if not in sorting array
                if (!angular.isDefined(input)) { return; }
                var ordered = [];
                var remaining = _.cloneDeep(input);
                angular.forEach(sortOrder, function (orderItem) {
                    if (angular.isDefined(input[orderItem])) {
                        ordered.push(input[orderItem]);
                        delete (remaining[orderItem]);
                    }
                });
                if (includeOrphans) {
                    angular.forEach(remaining, function (remainingItem, key) {
                        ordered.push(input[key]);
                    });
                }
                return ordered;
            };
        });

Answer 8

when you need to iterate over an array in a different order specified by another array, follow these steps:

Firstly, set up the following code snippet in your controller:

$scope.sortOrder = [1,2,3,4] //or any desired sorting order

Next, in your template, use the following syntax:

| orderByCustom:sortOrder:true/false

The true/false flag determines whether items not present in the sorting array will be displayed at the end or excluded altogether.

Don't forget to implement the custom filter as shown below:

var app = angular.module("app", []).filter("orderByCustom", function () {
            return function (input, sortOrder, includeOrphans) {
                //sorts by specified array and places unsorted items at the end if not in sorting array
                if (!angular.isDefined(input)) { return; }
                var ordered = [];
                var remaining = _.cloneDeep(input);
                angular.forEach(sortOrder, function (orderItem) {
                    if (angular.isDefined(input[orderItem])) {
                        ordered.push(input[orderItem]);
                        delete (remaining[orderItem]);
                    }
                });
                if (includeOrphans) {
                    angular.forEach(remaining, function (remainingItem, key) {
                        ordered.push(input[key]);
                    });
                }
                return ordered;
            };
        });

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using jQuery to retrieve the content of a textarea and display it

Transforming the shopping cart with redux-saga

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Creating a feature that uses a button press to initiate an Ajax request based on a specific identifier

The JavaScript-generated form element will not be included in the data submitted through the POST method

Error in Next.js 11: Unable to access property 'canonicalBase' as it is undefined

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

Issue with JavaScript code for Google Maps API not functioning as expected

Fixing TypeError: Object #<IncomingMessage> has no method 'flash' in ExpressJS version 4.2

Exploring React hook functionalities can lead to discovering unexpected issues such as cyclic dependencies on location.hash when

Carrying over additions in arrays using only Javascript

Add different input strings to an array within the scope when there is a change in the input value (AngularJS)

What is the best way to eliminate items from an array in a side-scrolling video game?

Having trouble rendering arrays and objects in Node, Express, and Jade?

Emit Observables within deeply nested callback functions

Experiencing difficulties with Magento operations

Angular Functions and Their Application

I'm baffled as to why this code isn't functioning properly

Running shell commands through child_process in JavaScript