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

Leveraging AngularJS for a Windows store app

Should we integrate a MongoDB database calculation app with a POST Controller in sails.js?

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Incorporating Bootstrap JS into Next.js

Upcoming verification with JSON Web Token

Looking to prevent printing and saving a webpage directly from the file menu using JQUERY or JavaScript

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

What is the method to close the picker when using type="datetime-local"?

How can I utilize customToJSON in Sails 1.0 within an Action2 function?

What is the best way to ensure that the HTML page is only shown once all data from three JSON files has been fully

Sending data from Ajax to PHP

Customize nestjs/crud response

Waiting for state changes in React by using the UseState Hook

Is there a way to retrieve data from three different Bookshelf.js models in a single query?

JavaScript in IE/Edge may not run correctly if it is loaded from the cache

Generate a unique promise with custom functionality using JavaScript bindings in Selenium WebDriver

Receive the deleted entry upon clicking the thead | Error发

Insert HTML content into an iframe with a callback function

Setting environment variables using the node command is successful on Linux and macOS platforms, however, it may not function properly

Function cannot be called upon directive initialization