There is no information available at this time

Question

There is no information available at this time

Currently, I am delving into Angular and am keen on creating a web application that consumes a Restful Web service. The setup of my page is as follows:

<%@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>

Unfortunately, despite the function of the ws through the URL, I am unable to display the result. Instead, all I see is this:

Hello World !!

Id : {{All.id}}

Nom :{{All.nom}}

javascript angularjs rest

Answer 1

Answer №1

Here is the updated syntax to use:

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

An error occurred due to changes in AngularJS version. The author was using version 1.6.9, where the methods success() and error() were deprecated starting from version 1.6.0-rc.0 (see Changelog).

BREAKING CHANGE:

The custom callback methods of $http - success() and error() - have been removed. Instead, you can now use the standard then()/catch() promise methods, but it's important to note that there are differences in method signatures and return values.

Replace success(fn) with then(fn), and replace error(fn) 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's a subtle difference between the options provided above. When using
$http(...).success(onSuccess).error(onError)
or
$http(...).then(onSuccess, onError)
, the onError() callback will only handle errors/rejections from the $http() call. If an error occurs within the onSuccess() callback, it won't be caught by onError(). Whereas, when utilizing
$http(...).then(onSuccess).catch(onError)
, onError() will capture errors/rejections from both $http() and onSuccess().

Answer 2

Here is the updated syntax to use:

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

An error occurred due to changes in AngularJS version. The author was using version 1.6.9, where the methods success() and error() were deprecated starting from version 1.6.0-rc.0 (see Changelog).

BREAKING CHANGE:

The custom callback methods of $http - success() and error() - have been removed. Instead, you can now use the standard then()/catch() promise methods, but it's important to note that there are differences in method signatures and return values.

Replace success(fn) with then(fn), and replace error(fn) 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's a subtle difference between the options provided above. When using
$http(...).success(onSuccess).error(onError)
or
$http(...).then(onSuccess, onError)
, the onError() callback will only handle errors/rejections from the $http() call. If an error occurs within the onSuccess() callback, it won't be caught by onError(). Whereas, when utilizing
$http(...).then(onSuccess).catch(onError)
, onError() will capture errors/rejections from both $http() and onSuccess().

Answer 3

Answer №2

The use of the success syntax has been marked as deprecated starting from Angular 1.4.3. Those utilizing a more recent version of Angular are advised to adopt the then syntax instead.

Answer 4

The use of the success syntax has been marked as deprecated starting from Angular 1.4.3. Those utilizing a more recent version of Angular are advised to adopt the then syntax instead.

Answer 5

Answer №3

Your code has two main issues that need to be addressed. The first problem is the common typo mistake of using sucess instead of success, as pointed out by others. Secondly, you are missing the step of passing the response data to your handler function within the success callback. It should look like this:

.success((response) => $scope.All = response.data)

.

It's important to note that I am correctly passing response to the success callback.

Additionally, it is recommended to utilize the following syntax for making 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 a response with an error status.
});

Answer 6

Your code has two main issues that need to be addressed. The first problem is the common typo mistake of using sucess instead of success, as pointed out by others. Secondly, you are missing the step of passing the response data to your handler function within the success callback. It should look like this:

.success((response) => $scope.All = response.data)

.

It's important to note that I am correctly passing response to the success callback.

Additionally, it is recommended to utilize the following syntax for making 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 a response with an error status.
});

There is no information available at this time

Answer №1

Answer №2

Answer №3

Similar questions

Update the multidimensional array function to ES6 syntax

Omit words from list in a route in Express.js

What is a common mistake when using refs in React?

Customize dynamically loaded data via AJAX

How to change the image source using jQuery when hovering over a div and set its class to active?

The fixed position setting does not anchor the elements to the bottom of a container

Using jQuery to compel a user to choose a value from the autocomplete suggestions within a textarea

Alter text within a string situated between two distinct characters

Having difficulty uploading files using FormData in JavaScript, as $_FILES is returning empty

Error encountered: Unable to reference Vue as it has not been defined while importing an external JavaScript file

Getting the latest version number of an app from the Google Play Store for an IONIC project

Tips for choosing the desired test to execute with Nightwatch Programmatic API

Include the jquery library and embed a Google Map

Leveraging ThemeProvider Parameters with Global Styled-Components

Can the animation be looped using setInterval()?

Validation of time picker consistently returns false

Can you explain the {| ... |} syntax in JavaScript to me?

Updating a Vue ref does not result in the component reflecting the changes made

Using dynamic values in Angular functions

I aim to decrease the number of decimal places in the code provided below