jcobo1
jcobo1

Reputation: 1170

Parsing json on Angular

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

Upvotes: 0

Views: 122

Answers (1)

Marius Wirtherle
Marius Wirtherle

Reputation: 36

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)

Upvotes: 1

Related Questions