One of the columns in my table is populated by a separate AJAX call after all the other columns have been filled. However, I am facing issues with the data not always displaying correctly due to the timing of this second call. I'm looking for advice on how to resolve this issue effectively. Below is the relevant code:
HTML:
<tr ng-repeat=“item in ctrl.items">
<td>{{ item.name }}</td>
<td>{{ item.desc }}</td>
<td><i class=“icon icon-check”></i> ng-class=“{ ‘active': ctrl.isActive(item) }”></td>
</tr>
CONTROLLER:
loadItems() {
myService.getItems().then( (response) => {
this.items = response;
this.loadColors();
});
}
loadColors() {
myService.getColors().then( (response) => {
_.forEach(response, (val, key) => {
_.forEach(this.items, function(item) {
if (item.id === key) {
item.colors = val;
}
});
});
});
}
isActive(item) {
return _.some(item.colors, function (color) {
return color === ‘green’ || color === ‘blue';
});
}
The issue I'm facing is that the 'active' css class in the last column does not get applied consistently. It sometimes works after reloading the page, but not always. I have tried using $timeout and $scope.$apply around this.loadColors(), but it hasn't resolved the problem.