Knockout Foreach creating duplicate items - html

Question

On our UI, we have classrooms that are eligible for assessments. After creating and adding in eligibleclassrooms, I am getting duplicates of each classroom type. The expected output is one of each classroom.
Relavant HTML:
<div class="eligible-classrooms">
<h5 class="semi-bold btm-gap-sm">Eligible Classrooms</h5>
<div class="classrooms">
<!-- ko foreach: model.sortedEligibleClassrooms -->
<div class="classroom">
<span data-bind="text: $data.ageRangeTypeName"></span><span class="count" data-bind="text: $data.numClassrooms"></span>
</div>
<!-- /ko -->
</div>
</div>
Relevant Typescript:
Model:
numberOfEligibleClassrooms: KnockoutObservableArray<{ ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }>,
sortedEligibleClassrooms: KnockoutComputed<Array<{ ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }>>
self.model:
numberOfEligibleClassrooms: ko.observableArray([]),
sortedEligibleClassrooms: null,
constructor(orgCaseId: number, observationType: ObservationTypeModel, orgObservationSetTypeId: number) {
var self = this;
self.model.sortedEligibleClassrooms = ko.computed(function () {
return self.model.numberOfEligibleClassrooms().sort((left: { ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }, right: { ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }): number => {
return left.ageRangeTypeId > right.ageRangeTypeId ? 1 : -1;
});
}, self.model.numberOfEligibleClassrooms);
self.load = (): void => {
CommonFactory.AppSettings.get('OrgClassroomCollectMajorityAgeRange', function (setting: IApplicationSetting) {
const majorityAgeRangeEnabled = setting ? setting.value.toString().toLowerCase() === 'true' : false;
OrgFactory.ObservationTypeAgeRangeTypes.search({ "observationTypeId": self.model.observationType.id(), isCount: true }, function (ageRangeTypes) {
for (var j = 0; j < ageRangeTypes.length; j++) {
// The following function preserves the scope of the variables
(function (ageRangeTypeId, ageRangeTypeName) {
var minimumAgeRangeTypeId = self.settings.isERSObservation() ? ageRangeTypeId : null;
var search = {
minimumAgeRangeTypeId: minimumAgeRangeTypeId,
includesAgeRangeTypeId: majorityAgeRangeEnabled ? null : ageRangeTypeId,
majorityAgeRangeTypeId: majorityAgeRangeEnabled ? ageRangeTypeId : null,
isCount: true
};
OrgFactory.OrgCase.getEligibleObservationClassrooms(orgCaseId, search, function (data) {
self.model.numberOfEligibleClassrooms.push({ ageRangeTypeId: ageRangeTypeId, ageRangeTypeName: ageRangeTypeName, numClassrooms: data.length });
});
})(ageRangeTypes[j].ageRangeTypeId, ageRangeTypes[j].ageRangeTypeName);
}
});
});
}
Output:

Answer 1

What I did to fix this is create a distinctEligibleClassrooms method that distinctly sorts through the list of eligible classrooms:
//creates a distinct array of eligible classrooms.
self.model.distinctEligibleClassrooms = ko.computed(function () {
const classrooms = self.model.numberOfEligibleClassrooms();
const seen = {};
const distinctClassrooms = classrooms.filter(classroom => {
if (!seen[classroom.ageRangeTypeId]) {
seen[classroom.ageRangeTypeId] = true;
return true;
}
return false;
});
return distinctClassrooms;
}, self.model.numberOfEligibleClassrooms);
I added this directly under the current sortedEligibleClassrooms method and removed that because it will no longer be in use.