Simple angularJS GET function with localhost not working

Question

I have a very simple Spring Rest backend that returns JSON data. The restful URL is working in my browser like this:

http://localhost:8080/abc/runlist

It returns data like so:

[
  {"stock_num":"KOH19","damage":"Toronto (Oshawa)"},
  {"stock_num":"AZ235","damage":"Toronto (Oshawa)"},
   ...
]

I have an independent html page that is not part of my web app. I just want to test to see if my angular code is getting the data and then looping through it.

<!DOCTYPE html>
<html>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="customersCtrl">

    <ul>
      <li ng-repeat="x in names">
        {{ x }}
      </li>
    </ul>

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost:8080/abc/runlist")
    .success(function (response) {$scope.names = response.records;});
    });
    </script>

    yo yo

    </body>
</html>

Why is it not working? I came across something in Spring where you need to implement something called CORS. I did that like so but still nothing returned:

@Component
public class SimpleCORSFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain  
    chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, 
    DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
}

What error are you getting? Have you tried to use $resource instead of $http? If you console.log(response) is there anything in it? — Kevin F, May 26 '15 at 17:11
You should get data just by navigating to `http://localhost:8080/abc/runlist` with your browser. If data is returned, it's your front-end, otherwise backend. Which is it? — Mikko Viitala, May 26 '15 at 17:32
I get data in my browser. It's the front end that's the issue. I also tried $resource. it doesn't interpret that angular brackets, just prints it out verbatum: {{ x.stock_num }} yo yo — logixplayer, May 26 '15 at 17:36

score 2 · Answer 1 · answered May 26 '15 at 18:06

Try something like:

js:

var app = angular.module('myApp', []);
 app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://localhost:8080/abc/runlist")
           .success(function (response){
              $scope.names = records;
           });
});

html:

<ul>
  <li ng-repeat="x in records">
    {{x}}
  </li>
</ul>

more params html:

<ul>
  <li ng-repeat="x in records">
    {{x.myName}}
    {{x.myNumber}}
  </li>
</ul>

Hope I've been helpfull.

score 1 · Answer 2 · answered May 26 '15 at 17:22

1

Try putting return in front of your $http.get

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    return $http.get("http://localhost:8080/abc/runlist").success(function (response) {
        $scope.names = response;
    });
});
</script>

then in your view use the dot notation to refer to the properties you want to display e.g.

{{x.stock_num}}

answered May 26 '15 at 17:22

Grant

218
1
5
15

Tried that, nothing returned. Not getting any errors either. :( – logixplayer May 26 '15 at 17:29
are you able to console.log the data in your success callback? – Grant May 26 '15 at 17:43

score 1 · Answer 3 · answered May 26 '15 at 18:03

Got it! There were 2 fixes:

Firstly I had to implement the CORS filter and class in order not get this error:

org.apache.catalina.connector.ClientAbortException: java.io.IOException: An established connection was aborted by the software in your host machine
at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:393)
at org.apache.tomcat.util.buf.ByteChunk.flushBuffer(ByteChunk.java:426)
at org.apache.tomcat.util.buf.ByteChunk.append(ByteChunk.java:339)
at org.apache.catalina.connector.OutputBuffer.writeBytes(OutputBuffer.java:418)
at org.apache.catalina.connector.OutputBuffer.write(OutputBuffer.java:406)

Secondly, a warning for example copiers! I had copied the simple example above from W3Schools, a great tutorial site as such:

$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});

Note the .records at the end of response. This was not needed. When I took it off, it worked.

score 0 · Answer 4 · edited May 23 '17 at 12:31

0

More than likely it's being caused by your use of the file:// scheme. See the middle bullet on the linked question here for reasoning. Basically your origin is going to be null for file:// requests, which causes XmlHttpRequest to fail, which $http relies on.

edited May 23 '17 at 12:31

Community

1
1

answered May 26 '15 at 17:14

Dave

900
6
22

score 0 · Answer 5 · answered Aug 26 '16 at 07:13

0

try this:

 $http.get("http://localhost:8080/abc/runlist")
.success(function (response, data, headers, status, config) {
  $scope.names = response.names;
});

hope it will work. :)

answered Aug 26 '16 at 07:13

manpreet singh bhinder

5
4

Simple angularJS GET function with localhost not working

5 Answers5