I am currently utilizing Angular.js in conjunction with Underscore.js
This is how my controller is structured:
var facultyControllers = angular.module('facultyControllers', []);
facultyControllers.controller('FacultyListCtrl', ['$scope','FacultyListFactory', function($scope, FacultyListFactory) {
//Retrieve JSON data from the server via factory
$scope.speakers = FacultyListFactory.query();
//Group speakers by last name letter for indexing
$scope.groups = _.groupBy($scope.speakers['faculty'], "lastNameStartsWith");
}]);
Here is a glimpse of my view design:
<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 format of the JSON received from the server is as follows:
{
"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 issue I am encountering arises when attempting to log $scope.speakers; it shows a resource and nesting arrays under faculty. If I substitute the JSON directly into my controller instead of using FacultyListFactory.query(); I can successfully execute $scope.groups = _.groupBy($scope.speakers['faculty'], "lastNameStartsWith");. However, it's not feasible to insert all the JSON directly due to numerous entries fetched from the server. When I try accessing the server through $scope.groups = .groupBy($scope.speakers['faculty'], "lastNameStartsWith"); an empty object is displayed in the console log, denoted by console.log(.groupBy($scope.speakers['faculty'], "lastNameStartsWith"));.
When I replace $scope.groups = _.groupBy($scope.speakers, "lastNameStartsWith"); I receive undefined because data resides within {"faculty":[...]}
I'm baffled on how to access the nested array beneath a key value from data extracted from a GET call. It's imperative to group by last name letter for this list, and despite spending hours trying to resolve the issue, I'm uncertain why 'faculty' isn't functioning as expected. Any assistance would be greatly appreciated! Thank you.