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
– Kevin F, Commented May 26, 2015 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
– Mikko Viitala, Commented May 26, 2015 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
– logixplayer, Commented May 26, 2015 at 17:36

AndreaM16 · Accepted Answer · 2015-05-26 18:06:52Z

2

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.

answered May 26, 2015 at 18:06

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

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

Comments

Grant · Accepted Answer · 2015-05-26 17:22:22Z

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, 2015 at 17:22

Grant

2181 gold badge5 silver badges15 bronze badges

2 Comments

logixplayer Over a year ago

Tried that, nothing returned. Not getting any errors either. :(

Grant Over a year ago

are you able to console.log the data in your success callback?

logixplayer · Accepted Answer · 2015-05-26 18:03:53Z

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.

Community · Accepted Answer · 2017-05-23 12:31:55Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered May 26, 2015 at 17:14

Dave

9457 silver badges25 bronze badges

Comments

manpreet singh bhinder · Accepted Answer · 2016-08-26 07:13:15Z

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, 2016 at 7:13

manpreet singh bhinder

54 bronze badges

Collectives™ on Stack Overflow

Simple angularJS GET function with localhost not working

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related