Manipulating data in angularjs/javascript

Question

I have a an array of objects like this in angular:

$scope.data = [
    {name:"John", group:"a"},
    {name:"David", group:"a"},
    {name:"Tom", group:"b"},
];

I want to present this data as something like this (in a template):

<h2>group a</h2>
John<br/>
David<br/>

<h2>groub b</h2>
Tom<br>

How would you suggest to do this? How can I go from the structure at the beginning to the structure at the end?

Answer 1

You could use grouby filter that would do group for you on basis of group property

Markup

<div ng-repeat="(key, value) in data | groupBy: 'group'">
  <h1>group {{ key }}</h1> 
  <div ng-repeat="person in value">
    {{ person.name }} 
  </div>
</div>