Knockout Foreach creating duplicate items

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:

score 0 · Answer 1 · answered Feb 14 '23 at 20:29

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.

In case it helps, apparently there's a .uniq() method available in Underscore.js, as per this post: https://stackoverflow.com/questions/22964485/how-to-remove-duplicates-in-knockout-js-dropdown-list#22965375 — Ryan Penfold, Apr 19 '23 at 19:10

Knockout Foreach creating duplicate items

1 Answers1