How do I set up a callback for processing data from an asynchronous HTTP service in Angular, ensuring that my array in the controller is populated properly?
My Code:
app.js
'use strict';
var app = angular.module('app', ['ngRoute']); // creating module
app.factory("Rest", ['$http', function($http){ // setting up service factory
var allUsers = []; // initializing empty array for all users
return{
getUsers: function(doneCallback){ // defining getUsers function with a callback parameter
var getHttp = $http({ // making a GET request to test.json
method: 'GET',
url: 'test.json'
});
getHttp.then(function successCallback(response) {
var users = response.data;
for(var i = 0; i < users.people.length; i++){
allUsers.push(users.people[i]); // adding objects to the allUsers array
}
console.log("Data retrieved from the SERVICE: " + allUsers[1].first); // confirming access to allUsers array within the service.
doneCallback(response.data.people); // attempting to call this in the controller but still getting undefined
}, function errorCallback(response) {
console.log("Error!");
});
}
}
}]);
app.controller('mainCtrl', ['$scope', 'Rest', function($scope, Rest){
$scope.usersArray = [];
// once the get request is complete, fill in the $scope.usersArray
$scope.addUsers = function(users){
for(var i = 0; i < users.length; i++){
$scope.usersArray.push(users); // trying to add users from the SERVICE to the CONTROLLER $scope.usersArray[]
}
console.log("Data accessed from the CONTROLLER: " + $scope.usersArray[1].first); // showing up as undefined :(
}
Rest.getUsers($scope.addUsers);
}]);
index.html (nothing special because we are looking in the console for the correct response from updateUser.php)
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restful Test</title>
</head>
<body ng-controller="mainCtrl">
<h1>Welcome to REST Test!</h1>
</body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
</html>
updateUser.php
<?php
$use = json_decode(file_get_contents("php://input"));
for($i=0; $i < count($use->users); $i++){
var_dump($use->users[$i]->first . " " . $use->users[$i]->last . " is a " . $use->users[$i]->position);
}
?>
test.json
{
"people": [
{"first": "Edward", "last": "Smith", "age": 18, "position": "Accountant"},
{"first": "Lucas", "last": "Santos", "age": 23, "position": "Programmer"},
{"first": "Jeremy", "last": "Grey", "age": 27, "position": "Fire Fighter"}
]
}
I attempted to keep my code minimal for testing purposes and to focus on addressing the specific question at hand.
The issue I am facing arises from the asynchronous nature of the $http call in Angular. The JSON data needs to be accessible within the controller before updating it, resulting in the $scope.usersArray being undefined due to timing issues. I introduced a callback function named doneCallback, intended to execute within the $http.then method to ensure completion before proceeding. However, despite these efforts, the array in the controller remains undefined.