I am utilizing angular-drupal to fetch data from my backend built on Drupal. My objective is to create an image gallery using the default endpoints provided by the services module. I make a call to node load to retrieve a specific node, then I extract the images attached to that node, iterate through them, and store them in an array.
Within my view, I utilize ng-repeat to loop through my loadedImages array, extract the file uri, and display the images accordingly.
The problem arises when ngRepeat immediately triggers, attempting to render the images before the promise for each one is resolved. This results in a forbidden GET error appearing at the top of the console, indicating that the view is trying to render an image with just the placeholder:-
GET http://localhost/headless-test/app/%7B%7B::val.uri_full%7D%7D 403 (Forbidden)
What would be the best approach to address this issue? I want to prevent ng-repeat from rendering anything until my array has been populated - or so I believe that's the root cause. Any assistance on this matter would be greatly appreciated. Additionally, it's worth noting that the functionality works as expected; however, the presence of the GET error in the console is undesirable.
Snippet of Controller code:
drupal.node_load(12).then(function(node) {
console.log(node, "node returned");
vm.loadedImages = [];
for (var i = 0; i < node.field_test_image_3.und.length; i++) {
drupal.file_load(node.field_test_image_3.und[i].fid).then(function(file) {
vm.loadedImages.push(file);
console.log(vm.loadedImages, "loaded images");
});
}
});
View section:
<div ng-cloak>
{{::vm.loadedImages}}
<div ng-repeat="(key, val) in vm.loadedImages">
<img src="{{::val.uri_full}}" />
</div>
</div>