Calling REST API in Angular JS not working

Question

I am trying to fetch data from REST API but it results blank.

index.html

<html ng-app="demo">
    <head>
        <title>Hello AngularJS</title>
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="hello.js"></script>
    </head>

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

hello.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').
        then(function(response) {
            $scope.greeting = response.data;
        });
});

output:

The ID is

The content is

ID and content is still missing. Any help please?

Edit:(FIX) Problem was with a plugin installed in the browser, which weren't allowing web service. Thanks everyone.

this is code is working just fine here: plnkr.co/edit/iufKaW1hfHUXzYOWd1b9?p=preview. The problem must be something to do with your environment or something you aren't showing here. — Claies
– Claies, Commented Jan 16, 2017 at 6:51
angular.module('demo', []) .controller('Hello', function($scope, $http) { $http.get('http://rest-service.guides.spring.io/greeting'). then(function(response) { $scope.greeting = response.data; }, function(error){ console.log(error); }; }); Try this and inspect the error on browser console. if There is no error then the you have to check the api return data property. — Md. Sabbir Ahamed
– Md. Sabbir Ahamed, Commented Jan 16, 2017 at 6:52
Are you sure it's not showing anything? Because your code works for me. As @Claies said, check your console for any possible errors. — user7266839
– user7266839, Commented Jan 16, 2017 at 6:52
Its working properly. Debug on browser console. This is the values I get returned content:"Hello, World!" id:886 — Md. Sabbir Ahamed
– Md. Sabbir Ahamed, Commented Jan 16, 2017 at 7:01

D K Sharma · Accepted Answer · 2017-01-16 07:00:45Z

1

Well Seems like your api return following response: { "id": 879, "content": "Hello, World!" }

try fetching response.content for accessing message

answered Jan 16, 2017 at 7:00

D K Sharma

971 silver badge4 bronze badges

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

Comments

Hemant Manwani · Accepted Answer · 2017-01-16 06:56:46Z

0

I tried to run your code in my local. I observed that if you replace http from https in you request, it wont work. Try to run this from file protocol in your browser and it will work as shown in the picture.

Also the api you mentioned is now working over HTTPS.

answered Jan 16, 2017 at 6:56

Hemant Manwani

1288 bronze badges

Comments

Md. Sabbir Ahamed · Accepted Answer · 2017-01-16 07:09:45Z

0

Edit your controller with following one

angular.module('demo', [])
.controller('Hello',
    function ($scope, $http) {

        var callMethod = function() {
            $http.get('http://rest-service.guides.spring.io/greeting')
                .then(function(response) {
                        $scope.greeting = response.data;
                        alert($scope.greeting.id);
                        alert($scope.greeting.content);
                    },
                    function(error) {
                        console.log(error);
                    });
        }

        callMethod();
    });

answered Jan 16, 2017 at 7:09

Md. Sabbir Ahamed

4851 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

Calling REST API in Angular JS not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related