Arrange the object's key-value pairs in ng-repeat by their values

Question

Arrange the object's key-value pairs in ng-repeat by their values

I'm completely new to AngularJS and I am working with an API that returns key-value pairs related to different sports.

$scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball" ... };

My challenge is sorting these items by sport name:

<ul>
  <li ng-repeat="(id, value) in sports | orderBy:'value'">
      <a ng-href='/page/{{id}}'>{{value}}</a>
  </li>
 </ul>

Unfortunately, this method doesn't seem to work as expected.

Check out the current output here

Current order:
--------------------
    Soccer // id: 1
    Tennis // id: 2
    Basketball // id: 3
    MMA // id: 4
    Street dance // id: 5
    Aerobics // id: 6
    Aerial hoop // id: 7

Desired order:
    --------------------
    Aerial hoop // id: 7
    Aerobics // id: 6
    Basketball // id: 3
    MMA // id: 4
    Soccer // id: 1
    Street dance // id: 5
    Tennis // id: 2

I attempted sorting within the controller using underscore.js but encountered issues with retaining information about ids. Link to that attempt can be found here: Attempt with Underscore.js

Can anyone provide guidance on how to effectively use `orderBy` in AngularJs when working with (key, value) pairs?

javascript angularjs sorting

Answer 1

Answer №1

If you refer to the official documentation, you'll find that orderBy function in AngularJS requires an array input, not an object.

The solution involves converting your object into an array. This can be achieved using the reduce method with a custom callback function as an argument.

$scope.sports = Object.keys($scope.sports).reduce(function(arr,key){
    arr.push({id: key, value: $scope.sports[key]})
    return arr;
},[]);

Alternatively, you can utilize the map method to accomplish this transformation.

$scope.sports = Object.keys($scope.sports).map((key) => ({id: key, value: $scope.sports[key]}));

With this setup, you can now present your items sorted by the value field.

<li ng-repeat="elem in sports | orderBy:'value'">
     <a ng-href='/page/{{elem.id }}'>{{elem.value}}</a> // id: {{id}}
</li>

Here is a functional implementation:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball", 4: "MMA", 5: "Street dance", 6: "Aerobics", 7: "Aerial hoop" };
    $scope.sports = Object.keys($scope.sports).map((key) => ({id: key, value: $scope.sports[key]}));
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <ul>
      <li ng-repeat="elem in sports | orderBy:'value'">
       <a ng-href='/page/{{elem.id }}'>{{elem.value}}</a> // id: {{elem.id}}
      </li>
    </ul>
</div>

Answer 2

If you refer to the official documentation, you'll find that orderBy function in AngularJS requires an array input, not an object.

The solution involves converting your object into an array. This can be achieved using the reduce method with a custom callback function as an argument.

$scope.sports = Object.keys($scope.sports).reduce(function(arr,key){
    arr.push({id: key, value: $scope.sports[key]})
    return arr;
},[]);

Alternatively, you can utilize the map method to accomplish this transformation.

$scope.sports = Object.keys($scope.sports).map((key) => ({id: key, value: $scope.sports[key]}));

With this setup, you can now present your items sorted by the value field.

<li ng-repeat="elem in sports | orderBy:'value'">
     <a ng-href='/page/{{elem.id }}'>{{elem.value}}</a> // id: {{id}}
</li>

Here is a functional implementation:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball", 4: "MMA", 5: "Street dance", 6: "Aerobics", 7: "Aerial hoop" };
    $scope.sports = Object.keys($scope.sports).map((key) => ({id: key, value: $scope.sports[key]}));
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <ul>
      <li ng-repeat="elem in sports | orderBy:'value'">
       <a ng-href='/page/{{elem.id }}'>{{elem.value}}</a> // id: {{elem.id}}
      </li>
    </ul>
</div>

Arrange the object's key-value pairs in ng-repeat by their values

Answer №1

Similar questions

Looking to create an Ajax Control Toolkit AutoCompleteExtender with results that are "similar"?

Show a popover within a parent div that has limited visible space due to its hidden overflow

Exploring the next() function in the Next JS API: A practical guide similar to Express JS

Integrate Angular 2 into the current layout of Express framework

Tips for creating a flexible Cell component in react-big-calendar:

Utilize Google Maps to receive directions to a specific destination and discover current traffic conditions along the route using their comprehensive API

`How can I troubleshoot path obstacles when transferring files in node.js?`

Stable and persistent popup window that remains at the forefront in a Chrome extension

Creating static HTML files for non-static pages using Next.js SSR/ISR

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

React-Tooltip trimming

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

Tips for retrieving the chosen value from a dropdown list in HTML

Utilize the Webstorm debugger in conjunction with node.js for seamless debugging

modifying the identification value in HTML and then reverting it

Is Axios phasing out support for simultaneous requests?

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

We'll show you the steps to properly organize a set of radio buttons created dynamically within a 'controlgroup' using jQuery Mobile

Differences between React class properties and ES6 class properties