After fetching data from an API, I use it to populate a form with cascading select fields. I have two functions in place to filter the array based on the selected options, but I am running into an issue where I cannot access properties from ng-model.
For instance, when I select the first option and retrieve its ID, I then need to pass that ID to a function in the controller which filters the array to display the appropriate options.
API DATA
section: { id: "111", name: "Section1" }
nomination: { id: "666", name: "Nomination2" }
category: { id: "999", name: "Category2"}
SERVICE
const allSections = [
{ id: '111', section: 'Section1' },
{ id: '222', section: 'Section2' },
{ id: '333', section: 'Section3' },
];
const allNominations = [
{ id: '555', sectionId: '111', nomination: 'Nomination1' },
{ id: '666', sectionId: '222', nomination: 'Nomination2' },
{ id: '777', sectionId: '333', nomination: 'Nomination3' },
];
const allCategories = [
{ id: '999', sectionId: '111', category: 'Category1' },
{ id: '888', sectionId: '222', category: 'Category2' },
{ id: '000', sectionId: '333', category: 'Category3' },
];
getSection() {
return allSections;
},
getSectionNomination(sectionId) {
const nominations = ($filter('filter')(allNominations, { sectionId }));
return nominations;
},
getNominationCategory(sectionId) {
const categories = ($filter('filter')(allCategories, { sectionId }));
return categories;
},
CONTROLLER
$scope.award = {};
$scope.sections = awards_service.getSection();
$scope.getSectionNominations = () => {
$scope.nominations =
awards_service.getSectionNomination($scope.award.section.id);
$scope.categories = [];
};
$scope.getNominationCategories = () => {
$scope.categories =
awards_service.getNominationCategory($scope.award.section.id);
};
VIEW
<select ng-model="award.section.id"
ng-change="getSectionNominations()"
ng-options="object.id as object.section for object in sections")
</select>
<select ng-model="award.nomination.id"
ng-change="getNominationCategories()"
ng-options="object.id as object.section for object in nominations")
</select>
<select ng-model="award.category.id"
ng-options="object.id as object.section for object in categories"
</select>
I am facing difficulties in retrieving the selected ID from the API Data and filtering my arrays. Although I can see the correct ID as award.section.id in the view, passing this parameter to the function in my controller results in undefined value. $scope.award.section.id is returning undefined.