CODEWITHSUNDEEP
angularjs
GKumar
GKumar

Reputation: 91

Calling REST API in Angular JS not working

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.

Upvotes: 0

Views: 1577

Answers (3)

Md. Sabbir Ahamed
Md. Sabbir Ahamed

Reputation: 485

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();
    });

Upvotes: 0

D K Sharma
D K Sharma

Reputation: 97

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

try fetching response.content for accessing message

Upvotes: 1

Hemant Manwani
Hemant Manwani

Reputation: 128

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.enter image description here

Also the api you mentioned is now working over HTTPS.

Upvotes: 0

Related Questions