Currently, I am working on an Angular application that retrieves data from a Web API service. The API sends back JSON objects which are then returned to the controller as an array of objects through the Angular service ($http.get()). This process is quite standard.
My goal is to include a property named "Selected" to each of the objects returned by the API. This particular property serves only for the user interface (UI) purposes and does not require any form of persistence. To achieve this, I thought it would be simplest to iterate through the array of objects and append it manually. That resulted in the following code snippet:
function getData() {
myService.getData()
.then(function(data) {
$scope.myData = data.results;
// Add a "Selected" property to each object
$.each($scope.myData, function(item) {
item.Selected = false;
});
}
However, upon executing the line "item.Selected = false," an error is thrown stating "Cannot assign to read-only property Selected." This raises the question as to why "Selected" is considered read-only. Is there some internal manipulation happening within Angular when processing objects? What mistake am I making here? Alternatively, should I consider an entirely different approach?
It's important to note that I wish to avoid integrating Selected into the original object structure as it holds no relevance to the object itself.