$http in angularjs not working

Question

I have a piece of Code in angularjs. If I hard code the value of http response it is displaying the response when I use the http method in angularjs it is not displaying. But I am getting response to that link locally. I dont know where I am wrong. Here is the code

<!DOCTYPE html>
<html>
  <head>
    <script script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
      .controller('MyCtrl', function($scope,$http){

        $scope.test = [
  {
    "done": 2,
    "total": 7
  }
];
});
    </script>
  </head>
  <body ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="t in test">
      <span>{{t.done}}</span>
      <span>{{t.total}}</span>
    </div>
  </body>
</html>

In Script again if i add the below code,its not displaying the values

<script>
      angular.module('myApp', [])
      .controller('MyCtrl', function($scope,$http){

         $http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) {

      $scope.test  = response;
  });
});
    </script>

Your code is confusing. You are doing ng-repeat on `test` variable. In your `MyCtrl`, there is no such variable? — Nandeep Mali, Jul 08 '16 at 06:46
which kind of response this http://localhost:8080/reports/webapi/hello/myresource2 link is sending. — Vivek Singh, Jul 08 '16 at 07:06
@Teja disable the web security of google chrome and run your application it will work — Gangadhar Jannu, Jul 08 '16 at 07:19

score 1 · Accepted Answer · edited May 23 '17 at 12:09

Try disabling web security of google chrome if you are running google chrome and run your application it will work normally.

Your problem is not with $http rather with CORS. I've ran into this issue when I was learning angularJS.

Since AngularJS or new frameworks using AJAX extensively there is a small issue called CORS(Cross origin resource sharing) which means we can access a resource from the same domain due to security concerns.

Please refer Understanding CORS.

Web applications are served by servers however you've tried to open your html directly in browser which means you are trying to access a http resource from file protocol which is not allowed as per CORS.

You've two options to use.

Disable web security in google chrome
Run your application in a static server.

Thank you very much......It worked.......just implemented second option — Teja, Jul 08 '16 at 08:25
In addition to that, it should be `response.data` not just the `response` — Chinni, Jul 08 '16 at 09:22

Chinni · Answer 2 · 2016-07-08T06:58:41.053

0

Your actual data resides in response.data. So update your scope variable accordingly,

Your controller code,

angular.module('myApp', [])
  .controller('MyCtrl', function($scope, $http) {
      $http.get("http://localhost:8080/reports/webapi/hello/myresource2")
      .then(function (response) {
          $scope.test = response.data;
      });
});

Hope this solves the issue.

edited Jul 08 '16 at 06:58

answered Jul 08 '16 at 06:47

Chinni

1,199
1
14
28

Can you add `console.log(response.data)` and post the output? – Chinni Jul 08 '16 at 06:58
angular.module('myApp', []) .controller('MyCtrl', function($scope,$http){ $http.get("http://localhost:8080/reports/webapi/hello/myresource2") .then(function (response) { $scope.test = response.data; console.log(JSON.stringify($scope.test)); });............Its Blank – Teja Jul 08 '16 at 07:03
No console output? – Chinni Jul 08 '16 at 07:05
XMLHttpRequest cannot load http://localhost:8080/reports/webapi/hello/myresource2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – Teja Jul 08 '16 at 07:09
@Teja Which browser you are using? – Gangadhar Jannu Jul 08 '16 at 07:13
So the `url` you are trying to send a `get` request is not getting correct (or) required headers. This is not the issue of `$http`. Please ensure you are sending all the required headers. – Chinni Jul 08 '16 at 07:15
1

Are you running your application as a web application or by simply opening index.html in browser? – Gangadhar Jannu Jul 08 '16 at 07:16
simply opening as abc.htm in browser – Teja Jul 08 '16 at 07:19
1

First you should disable web security of google chrome and run you abc.htm since you are trying to access http protocol from file protocol. – Gangadhar Jannu Jul 08 '16 at 07:20
No problem. Happy to help :) – Chinni Jul 08 '16 at 09:19

score 0 · Answer 3 · answered Jul 08 '16 at 07:04

try to add another function for the catching of error response

$http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) {
        $scope.test  = response;
    }, function(response){
       console.log(response)
    });

Vivek Singh · Answer 4 · 2016-07-08T07:26:13.160

I also went to the similar problem and solved by adding the following HTTP headers at the response of the receiving end.

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin:

You may prefer not to use the * at the end, but only the domainname of the host sending the data. Like *.example.com

But this is only feasible when you have access to the configuration of the server.

You need to add these headers in the server, not in AngularJS Since you are sending json data through your api .You have to do like this.

<script>
  angular.module('myApp', [])
  .controller('MyCtrl', function($scope,$http){

     $http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) {

  $scope.test  = response.data;
}); 
 });
</script>

$http in angularjs not working

4 Answers4