Parsing json on Angular - angularjs

Question

I have a table made from a JSON, there is a button on every row and when you click it invokes a web service passing the element id. The web services tryes to delete the element from the database, if it can be deleted returns a simple JSON with the attributte 'status' and two possible values 'ERASED' (if deleted) or 'IN_USE' (if not). When I click on the button the web service answers ok ('IN_USE' actually). But when I try to read the 'status' value for show a message (depending if it's 'IN_USE' or 'ERASED') it returns me 'undefined' and don't know why. I've been making some tricks but still don't work. I also did the web service with slim framework 2.
The controller (just the function with troubles):
$scope.show = function (id) {
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/edita/elimina/' + id + '.json').success(function (data) {
$scope.sts = data.status;
$window.alert($scope.sts);
});
if ($scope.sts.status == 'IN_USE') {
$window.alert('Aquest atribut no es pot eliminar perque és en ús');
}
}
There is the web service (it's done with slim framework 2):
$app->get('/tipusactius/edita/elimina/:id.json', function($id){
header("Content-Type: application/json");
$SQL = 'DELETE FROM atributs_actiu WHERE idatributs_actiu = '.$id;
error_log('DELETE STATEMENT: '.$SQL, 0);
$mysqli = getDB();
$r = $mysqli->query($SQL);
error_log(mysqli_error($mysqli));
if(!$r){
$results[] = array( 'status' => 'IN_USE' );
}
else{
$results[] = array( 'status' => 'ERASED' );
}
echo json_encode($results);
});
The web services run ok, but I'm getting an undefined on the console when I try check the status value.
Solved:
There was two mistakes on this case:
1-The funciton is asynchronous, so even I get something from the server the message can be still being 'undefined'
2-I wasn't caching the 'status' value appropiettly.
This is how i did it finally:
$scope.sts[0].status
All this inside $http.get function as Marius Wirtherle said:
Your Problem is probably that the $http Request is executed
asynchronously. So the Request is not finished yet when you do the
$window.alert
Modify your code like this to use wait for the $http Promise to
Resolve:
$scope.show = function(id){
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/edita/elimina/' +
id + '.json')
.then(function(response){ // success callback (.success is deprecated)
$scope.sts = response.data.status;
if ($scope.sts == 'IN_USE') {
$window.alert('Aquest atribut no es pot eliminar perque és en ús');
}
}, function(response){ //error callback
$window.alert(response.statusText);
});
}
Further reading on $http:
https://docs.angularjs.org/api/ng/service/$http

Answer 1

Your Problem is probably that the $http Request is executed asynchronously. So the Request is not finished yet when you do the $window.alert
Modify your code like this to use wait for the $http Promise to Resolve:
$scope.show = function(id){
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/edita/elimina/' + id + '.json')
.then(function(response){ // success callback (.success is deprecated)
$scope.sts = response.data.status;
if ($scope.sts == 'IN_USE') {
$window.alert('Aquest atribut no es pot eliminar perque és en ús');
}
}, function(response){ //error callback
$window.alert(response.statusText);
});
}
Further reading on $http: https://docs.angularjs.org/api/ng/service/$http
(Also i think you have a .status to much in your code. One at line $scope.sts = data.status; and then in if($scope.sts.status == ...). So its basically data.status.status)