CODEWITHSUNDEEP
javascriptangularjsrest
Mehdi Bajjou
Mehdi Bajjou

Reputation: 59

No value displayed

So I am learning Angular , and I would like to make a web Application which consumes a Restful Web service . So my page looks like this :

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html ng-app="Tripeew">
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Tripeew</title>
    </head>
    <body ng-controller="region">
        <h1>Hello World !!</h1>
             <p>Id : {{All.id}}</p> 
             <p>Nom :{{All.nom}}</p>
             <br/>
        <script type="text/javascript">
            var myapp = angular.module('Tripeew',[]);
            myapp.controller('region',function($scope,$http){
                $http.get('http://localhost:9090/Tripeew_V1.0/webresources/tripeewws.regions/3').succes(function(){
                    $scope.All = response.data ; 
                });
            });
        </script>
    </body>
</html>

But I can't have the result of the ws , which is working via URL , all I get is this :

Hello World !!

Id : {{All.id}}

Nom :{{All.nom}}

Upvotes: 1

Views: 56

Answers (3)

Roman Cherepanov
Roman Cherepanov

Reputation: 1805

Use this syntax:

$http.get('http://localhost:9090/Tripeew_V1.0/webresources/tripeewws.regions/3').then(function(response) {
    $scope.All = response.data ;
});

Error is occured because AngularJS version that author uses is 1.6.9, but success()/error() was deleted in 1.6.0-rc.0 version (see Changelog).

BREAKING CHANGE:

$http's deprecated custom callback methods - success() and error() - have been removed. You can use the standard then()/catch() promise methods instead, but note that the method signatures and return values are different.

success(fn) can be replaced with then(fn), and error(fn) can be replaced with either then(null, fn) or catch(fn).

Before:

$http(...).
  success(function onSuccess(data, status, headers, config) {
    // Handle success
    ...
  }).
  error(function onError(data, status, headers, config) {
    // Handle error
    ...
  });

After:

$http(...).
  then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  }, function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

// or

$http(...).
  then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  }).
  catch(function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

Note: There is a subtle difference between the variations showed above. When using $http(...).success(onSuccess).error(onError) or $http(...).then(onSuccess, onError), the onError() callback will only handle errors/rejections produced by the $http() call. If the onSuccess() callback produces an error/rejection, it won't be handled by onError() and might go unnoticed. In contrast, when using $http(...).then(onSuccess).catch(onError), onError() will handle errors/rejections produced by both $http() and onSuccess().

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 10148

Well, there are two problems with your code. First one is obvious as everbody have told you to correct the typo of sucess to success and second you're not passing response to your handler function that you wrote in success. I mean you should pass the data like .success((response)=> $scope.All = response.data).

Notice, I am passing response to success callback.

Moreover, you better use the following syntax to make http requests with angularjs

   $http({
     method: 'GET',
    url: '/someUrl'
      }).then(function successCallback(response) {
      // this callback will be called asynchronously
      // when the response is available
     }, function errorCallback(response) {
     // called asynchronously if an error occurs
     // or server returns response with an error status.
    });

Upvotes: 0

Timovski
Timovski

Reputation: 591

The success syntax is deprecated since Angular 1.4.3. If you're using a newer version of Angular you should use the then syntax.

Upvotes: 0

Related Questions