Grouping the Data in the Alphabetical order

Question

User-1202100973 posted

Hi Every one,

I have created an angular Application. And getting the data from controller.

when I user the ng-repeat and display all the data. I need to Group them with start letter of Name

When I apply filters orderBy:'Name' It’s sorting  all the data and put in same placeholder.

Grouping Data in Alphabetical order and place them accordingly to their Start Letter

i.e
A
Data starts with A
B
Data starts with B
C
Data starts with C
D
Data starts with D

Any Help is Appreciated.

Thanks 

Adi

Answer 1

User-271186128 posted

Hi Aditya_ven,

Grouping the Data in the Alphabetical order

As for this issue, you could refer to the following code:

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


function MyCtrl($scope) {
    $scope.speakers = [
        {name: 'Nick Whatevers'},
        {name: 'Bob Not'},
        {name: 'Anthony Poustrakis'},
        {name: 'Bill Clit'}
    ];
    
    $scope.firstLetter = function(name) {
      return name && name.charAt(0);
    }

}


<div ng-controller="MyCtrl">

    <div ng-repeat="speaker in speakers | orderBy : 'name'">
        <div class="item item-divider" ng-if="firstLetter(speaker.name) != firstLetter(speakers[$index-1].name)">
          {{firstLetter(speaker.name)}}
        </div>
        {{speaker.name}}
    </div>
    
</div>

More details, see: http://jsfiddle.net/q85ot3td/

Also you could refer to this sample: https://jsfiddle.net/plantface/L6cQN/

Best regards,
Dillion

Answer 2

User-1202100973 posted

Thank You Zhi.

It's working as expected

Answer 3

User-1202100973 posted

Hi Zhi ,

It worked as expected but itd duplicating the data in few case:

myApp.controller("MyCtrl",function($scope){
 $scope.speakers = [
        {name: 'Nick Whatevers'},
        {name: 'Anthony'},
        {name: 'Bob Not'},
        {name: 'Anthony Poustrakis'},
        {name: 'bill Clit'},
     {name: 'Johnny'},
     {name: 'Jeeva'},
  {name: 'Mother'},
     {name: 'Martha'},
     {name: 'Jai'}
  
    ];
   

Can You pls advise how can I remove the duplicates

Answer 4

User-271186128 posted

Hi Aditya_ven,

Can You pls advise how can I remove the duplicates

As we can see, the data source is an object array, you could refer to the following code to loop through the array and remove the duplicates records:

    <script type="text/javascript">  
        var Array = [{ "Name": "Bob Ross", "EmpID": "0441" },  
            { "Name": "Ram", "EmpID": "0442" },  
            { "name": "Bob Ross", "EmpID": "0441" },  
            { "name": "Pradeep", "text": "0443" },  
            { "name": "Ram", "text": "0442" }];  
  
        ArrayArray = Array.reduce(function (item, e1) {  
            var matches = item.filter(function (e2)  
            { return e1.EmpID == e2.EmpID});  
            if (matches.length == 0) {  
                item.push(e1);  
            }  
            return item;  
        }, []);  
  
        console.log(Array);  
    </script>  

More details, see:

http://www.c-sharpcorner.com/blogs/remove-duplicates-in-array-of-objects-using-jquery

Best regards,
Dillion

Answer 5

User-1202100973 posted

thank you