Underscore groupBy using server data

Question

I am using Angular.js with Underscore.js

My controller looks like this:

var facultyControllers = angular.module('facultyControllers', []);
facultyControllers.controller('FacultyListCtrl', ['$scope','FacultyListFactory', function($scope, FacultyListFactory) {
  //Get json from the server using factory
  $scope.speakers = FacultyListFactory.query();

  //GroupBy last name letter for the index
  $scope.groups = _.groupBy($scope.speakers['faculty'], "lastNameStartsWith");
}]);

My view looks like this:

<section id="faculty-list">
    <div ng-repeat="(lastNameStartsWith, speakers) in groups">
       <h3 id="{{lastNameStartsWith}}" class="faculty-list-header">{{lastNameStartsWith}}</h3>
       <article class="faculty-list-repeater" ng-repeat="speaker in speakers | filter: facultyFilter | orderBy:'last'">
           <div class="row">
           ...
           <div class="col-xs-10">
               <ul class="faculty-short-detail list-unstyled">
                  <li class="name">{{speaker.displayAs}}</li>
                  ...
               </ul>
           </div>
           </div>
        </article>
    </div>
</section>

The json coming from the server is formatted like below:

{
    "faculty":[
    {displayAs: 'John', lastNameStartsWith: 'A', firstName:'John', age:25, gender:'boy'},
    {displayAs:'Jessie', lastNameStartsWith: 'E', age:30, gender:'girl'},
    {displayAs:'Johanna', lastNameStartsWith: 'F', age:28, gender:'girl'},
    {displayAs:'Joy', lastNameStartsWith: 'F', age:15, gender:'girl'},
    {displayAs:'Mary', lastNameStartsWith: 'G', age:28, gender:'girl'},
    {displayAs:'Peter', lastNameStartsWith: 'L', age:95, gender:'boy'},
    {displayAs:'Sebastian', lastNameStartsWith: 'O', age:50, gender:'boy'},
    {displayAs:'Erika', lastNameStartsWith: 'T', age:27, gender:'girl'},
    {displayAs:'Patrick', lastNameStartsWith: 'V', age:40, gender:'boy'},
    {displayAs:'Samantha', lastNameStartsWith: 'Z', age:60, gender:'girl'}
    ]
};

The problem I am running into is when I do a console.log($scope.speakers); it does a resource and then the arrays are under faculty. If I put the above json directly into my controller in place of FacultyListFactory.query(); I can run $scope.groups = _.groupBy($scope.speakers['faculty'], "lastNameStartsWith"); successfully. But I can't put it directly into my controller because there are hundreds of them and they are coming from the server. If I run $scope.groups = .groupBy($scope.speakers['faculty'], "lastNameStartsWith"); trying to access the server I get an object in the console log but it appears to be empty, I ran console.log( .groupBy($scope.speakers['faculty'], "lastNameStartsWith"));

If I run $scope.groups = _.groupBy($scope.speakers, "lastNameStartsWith"); I get undefined because the data is under {"faculty":[...]}

I'm not sure how I can access the nested array under the key value from data coming from a GET call. I need to group by last name letter for this list and I've been trying to get it to work for hours. I'm not sure why 'faculty' isn't working. Please help! Thanks

Answer 1

$scope.groups = _.groupBy(...); should be in the success callback of query() so that it runs after the data is returned...

$scope.speakers = FacultyListFactory.query(function (data) { 
    $scope.groups = _.groupBy($scope.speakers['faculty'], "lastNameStartsWith"); 
}, function(error) { // error handler });