I am currently facing an issue with a section of my code that involves loading attributes related to a page using drop-down lists. These attributes, namely instruments, style, and scoring, are fetched through a service call.
For instance, when retrieving instruments:
//Get Instruments
$http.get('/api/Instrument/GetAllInstruments').success(function (data, status, headers, config) {
$scope.instruments = data;
}).error(function (data, status, headers, config) {
$scope.error = "An Error has occurred while fetching Instruments!" + data;
});
Here's the corresponding HTML:
<select class="form-control"
name="recordInstrument"
data-ng-model="recordInstrument"
required
data-ng-options="i.ID as i.Description for i in instruments">
<option value="">-- Choose an Instrument --</option>
</select>
When a user selects a record from a list, the values associated with that record are loaded onto a form. These values also include attribute values that determine the selected option in the drop-downs.
Upon clicking the record, an "edit" function is triggered. This function invokes a service to fetch the record and checks if the attribute array is not empty using an if statement. If the array isn't empty, it utilizes a forEach loop to set the ng-model ($scope.recordInstrument) for the default selection in the record's drop-down. If the array is empty, it sets the ng-model to 0 to reset the drop-down back to the default value of "Choose an instrument".
Below is the relevant code snippet: //Edit Store Page $scope.edit = function () {
if (this.page.SPPreambleID === null || this.page.SPPreambleID === 0) {
this.page.SPPreambleID = -1;
}
$http.get('/api/StorePage/GetStorePage?StorePageID=' +
this.page.StorePageID +
'&SPPreambleID=' +
this.page.SPPreambleID).success(function (data) {
$scope.updateShow = true;
$scope.addShow = false;
$scope.newpage = data;
if (data.SPAttributeRefID.length > 0) {
angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) {
if (attribute == 1) {
...
};
if (attribute == 2) {
...
};
if (attribute == 3) {
...
};
});
}
else {
$scope.recordInstrument = 0;
$scope.recordStyle = 0;
$scope.recordScoring = 0;
}
}).error(function () {
$scope.error = "An Error has occurred while Editing this Store Page!" + data;
});
}
The issue arose after I introduced the following condition: if ($scope.newpage.SPAttributeRefID.length > 0) { ... }
This check was added because certain records may lack drop-down attributes, causing issues if transitioning from a previous record with values already set. Subsequently, since adding this condition, I started encountering errors pointing to the reduce function, and I'm unsure about the mistake I might've made.
I would appreciate any guidance or assistance in resolving this matter.
Thank you for your time.