My AngularJS client isn't consuming my RESTful call

Question

I am trying to get my feet wet on angularjs that consumes a RESTful service, however, I am running into an issue.

I have a REST call, http://localhost:8080/application/webapi/myApp/, that returns the following JSON:

  {
    "content": "Hello World",
    "id": 1
  }

Also, I have the following angularjs controller:

var myApp = angular.module("myModule", [])
    .controller("Hello", function($scope, $http) {
        $http.get('http://localhost:8080/application/webapi/myApp/').
        success(function(data) {
            $scope.greeting = data;
        });
});

And my index.html has the following,

<div ng-controller="Hello">
    <p>The ID is {{greeting.id}}</p>
    <p>The content is {{greeting.content}}</p>
</div>

where the ng-app is defined in the body tag.

But when I a run my index.html, on my Tomcat server, it doesn't consume my REST call. Instead, it produces blanks where my binding expressions are.

My index.html looks like this:

My First Application!

The ID is

The content is

I am not sure why it doesn't consume my REST call?

My index.html should say,

My First Application!

The ID is 1

The content is "Hello World"

but it doesn't :(.

Did you make sure that your server is up and it is returning data? — Pritam Banerjee
– Pritam Banerjee, Commented Apr 25, 2016 at 3:42
@PritamBanerjee Yes, I did. I have my Tomcat server running and I am on postman rest client and it is returning a successful JSON back. — Robben
– Robben, Commented Apr 25, 2016 at 3:43
You may want to initialize $scope.greeting to an empty object so that greeting.whatever doesn't throw an error — jpopesculian
– jpopesculian, Commented Apr 25, 2016 at 3:44
There are no errors in the console which is making it very hard to debug. — Robben
– Robben, Commented Apr 25, 2016 at 3:48

Anik Islam Abhi · Accepted Answer · 2016-04-25 04:00:27Z

2

From the angular DOC

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

Try like this

$http.get('http://localhost:8080/application/webapi/myApp/').
then(function(result) {
    $scope.greeting = result.data[0];
});

edited Apr 25, 2016 at 4:00

answered Apr 25, 2016 at 3:43

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Robben Over a year ago

Nope, no errors whatsoever :( which is makes it hard to debug.

Anik Islam Abhi Over a year ago

can you put console.log(result.data) in the .then and provide the output ? @Robben

Robben Over a year ago

I get this in the console when I place the log: [Object]0: Objectlength: 1__proto__: Array[0]

Anik Islam Abhi Over a year ago

@Robben can you provide the screenshot of it

Robben Over a year ago

I have edited my question to include the screenshot.

|

Pritam Banerjee · Accepted Answer · 2016-04-25 04:35:25Z

1

Try changing your code to :

$http.get("http://localhost:8080/application/webapi/myApp")
.then(function(response) {
    $scope.greeting = response.data[0];
});

Or to:

$http({
    method : "GET",
    url : "http://localhost:8080/application/webapi/myApp"
}).then(function mySucces(response) {
    $scope.greeting = response.data[0];
}, function myError(response) {
    $scope.greeting = response.statusText;
});

Also make sure that you name the json somethinglike this in the return type:

 returnJson{
 "content": "Hello World",
 "id": 1
 }

edited Apr 25, 2016 at 4:35

answered Apr 25, 2016 at 3:45

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

6 Comments

Pritam Banerjee Over a year ago

@Robben Can you try $scope.greeting = data.data

Robben Over a year ago

I get an error when I do that. It says data is not defined

Pritam Banerjee Over a year ago

@Robben Can you try again by removing the last slash in your url. it should look like: localhost:8080/application/webapi/myApp

Pritam Banerjee Over a year ago

@Robben From your comments, can you try data[0] ?

Robben Over a year ago

Thanks that works. But why does data[0] work and not just data alone? How can I make my code to work by using data instead of data[0]?

|

Collectives™ on Stack Overflow

My AngularJS client isn't consuming my RESTful call

2 Answers 2

11 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related