Sort subarrays in array with AngularJS

Question

If I have a dataset that contains an array of objects, with each object having an array inside of them, how can I sort the subarrays by their properties? For example, here is some sample music data, it has 2 albums with tracks within them:

albums: [
  {
    type: "album",
    name: "Brothers",
    tracks: [
      {
        type: "track",
        name: "Everlasting Light"
      },
      {
        type: "track",
        name: "Next Girl"
      },
      {
        type: "track",
        name: "Tighten Up"
      }
    ]   
  },
  {
    type: "album",
    name: "Listen",
    tracks: [
      {
        type: "track",
        name: "Around Town"
      },
      {
        type: "track",
        name: "Forgive & Forget"
      }
    ]   
  }
]

The result would look like this:

- Around Town
- Everlasting Light
- Forgive & Forget
- Next Girl
- Tighten Up

Is there any way I can use an ng-repeat to create an alphabetically sorted list of music tracks?

I'd imagine it working something like below, but I tried with no success.

<p ng-repeat="track in albums.tracks">{{track.name}}</p>

Well, you only want to show the tracks alphabetically, nothing more? — developer033
– developer033, Commented Jul 3, 2016 at 4:44
@developer033 Yep, that's all I need at this basic level, but I can't change the data structure — Alex Wohlbruck
– Alex Wohlbruck, Commented Jul 3, 2016 at 4:59

developer033 · Accepted Answer · 2016-07-03 05:07:10Z

Since you need only the tracks of albums, you should merge all the tracks in a single array and then just sort it alphabetically. Here's is a snippet working:

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

app.controller('mainCtrl', function($scope) {
  $scope.albums = [
    {  
      "type":"album",
      "name":"Brothers",
      "tracks":[  
         {  
            "type":"track",
            "name":"Everlasting Light"
         },
         {  
            "type":"track",
            "name":"Next Girl"
         },
         {  
            "type":"track",
            "name":"Tighten Up"
         }
      ]
   },
   {  
      "type":"album",
      "name":"Listen",
      "tracks":[  
         {  
            "type":"track",
            "name":"Around Town"
         },
         {  
            "type":"track",
            "name":"Forgive & Forget"
         }
      ]
   }
];
  
  $scope.tracks = [];
  angular.forEach($scope.albums, function(value) {
    $scope.tracks = $scope.tracks.concat(value.tracks);
  });
});

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>

<body ng-controller="mainCtrl">
  <div ng-repeat="track in tracks | orderBy:'name'">
    <span ng-bind="track.name"></span>
  </div>
</body>
</html>

Okay, that works well enough. I was hoping there would be a built-in way to do this

AshwinK · Accepted Answer · 2016-07-03 04:39:19Z

0

You can use the orderby filter to sort your list based on a property. The angular website has more info on this https://docs.angularjs.org/api/ng/filter/orderBy

Here is a plunker that might help, https://plnkr.co/edit/goxNA9PvBeFL0hyWp9hR?p=preview

You can use the filter directly in your html to sort by a property.

<div ng-repeat="album in albums">
    <h2>{{album.name}}</h2>
      <div ng-repeat="track in album.tracks | orderBy:'name'">
          {{track.name}}
      </div>
</div>

edited Jul 3, 2016 at 4:39

answered Jul 3, 2016 at 4:36

AshwinK

13 bronze badges

2 Comments

Alex Wohlbruck Over a year ago

Sorry if my wording was confusing, what I need is an uninterrupted list of all the track names, sorted alphabetically. I've updated the question to show you the result I want

AshwinK Over a year ago

You could create a new array for tracks and use lodash to just pull out arrays from each of your albums. Ng-repeat and order by on the tracks and that should do it. plnkr.co/edit/juYgqPNNjZnZGe7Pea5w?p=preview

Collectives™ on Stack Overflow

Sort subarrays in array with AngularJS

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related