Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
<pre>{{ output }} </pre>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $http) {
const apiEndPoint = 'https://jsonplaceholder.typicode.com';
let callbackCount = 0;
const itemsToLoad = [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}];
$scope.output = '';
itemsToLoad.forEach(function(item, index) {
$scope.output += 'Loop: ' + index + '\n';
$http({
method: 'GET',
url: apiEndPoint + '/posts/' + item.id
}).then(function successCallback(response) {
$scope.output += 'Callback: ' + callbackCount + '\n';
callbackCount++;
});
});
});