Geek Answers Handbook

Simple angularJS GET function with broken localhost

I have a very simple Spring Backend that returns JSON data. The return URL works in my browser like this: http://localhost:8080/abc/runlist

It returns data as follows:

[{"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 application. I just want to check if my angular code is getting data, and then it scrolls 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>

`

Why doesn't it work? I met something in Spring where you need to implement something called CORS. I did it like this, but nothing came back:

@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() {}
}
+4
source share
5 answers

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 was helpful.

+2
source

Try to refund 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>

, , , .

{{x.stock_num}}
+1

, file://. . . file://, XmlHttpRequest, $http.

0

! 2 :

-, CORS, :

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)

-, , , ! W3Schools, :

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

.records . . , .

0

:

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

, .:)

0

More articles:


All Articles