Within my application, I am utilizing two separate API calls. The initial call retrieves a catalog of services along with their unique ID's. Subsequently, once the ID information is acquired, a second call is made to retrieve pricing data for each corresponding service. However, a pressing issue has arisen where the second GET request is being excessively triggered on each page load, leading to memory problems in browsers like Chrome and Firefox.
The following code snippet reflects my view setup:
<tr ng-repeat="c in catalog track by $index">
<td>{{ c.id }}</td>
<td>{{ c.name }}</td>
<td>{{ c.description }}</td>
<td>{{ c.service_status }}</td>
<td>{{ getService(c.id) }} {{services}} </td>
</tr>
My API calls are structured in factories using promises as outlined below:
app.factory('catalogDataFactory', function($http){
var getCatalog = function() {
// Sample API call response
return $http.get("../data/catalog.json").then(function (result){
return result.data;
});
};
return { getCatalog: getCatalog };
});
app.factory('servicesDataFactory', function($http){
var service = {};
var baseURL = '../data/';
var _guid = '';
service.setGuid = function(guid){
console.log("setGuid is being called multiple times with input: " + guid);
_guid = guid;
}
service.callAPI = function(){
console.log("callAPI is being invoked too frequently");
return $http.get(baseURL + _guid + ".json").then(function (result){
return result.data;
});
}
return service;
});
The structure of my controller is as follows:
app.controller('customersCtrl', function($scope, $compile, catalogDataFactory, servicesDataFactory, utilities) {
$scope.catalog = []
$scope.service = [];
catalogDataFactory.getCatalog().then(function(result) {
$scope.catalog = result.data[0]['services'].data;
console.log("getCatalog is being called excessively");
$scope.getService = function (guid){
console.log("getService is being invoked too many times");
servicesDataFactory.setGuid(guid);
$scope.service = servicesDataFactory.callAPI();
};
});
});
An error message I am encountering is https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5D, causing browser freezing and numerous repetitions of the same errors in the console logs.
Given these circumstances, I pose the question whether switching from a factory to a Service for the second API call would be more beneficial, or if fundamental changes are necessary within the code?