how to send data from spring controller to angularjs controller with response of data

Question

controller code

@RequestMapping(value="/welcomes", method = RequestMethod.GET, produces="MediaType.application/json")
    public @ResponseBody ModelAndView welcome(@ModelAttribute UserBean userBean)
    {
        List<UserBean> usernames=new ArrayList<UserBean>();
        usernames = retrievedataservice.findAllUsers(userBean);
        System.out.println(usernames.size());
        return new ModelAndView("welcomes", "usernames", usernames);
    }

angular js code

<script>
var app = angular.module('myApp', []);
app.controller('UserController', function($scope, $http, $location){
    $scope.usernames=[];
        var url = $location.absUrl() + "http://localhost:8080/SpringAngular/welcomes";
        $http.get(url).then(function (response) 
        {
            $scope.usernames = response.records;
        },function error(response) 
        {
            $scope.postResultMessage = "Error with status: " +  response.statusText;
        });
});
</script>
<div data-ng-app="myApp" data-ng-controller="UserController">
   <table border="1" width="50%" height="50%"> 
    <tr><th>user_name</th><th>phone</th><th>email</th></tr>
     <tr data-ng-repeat="user in usernames">
     <td>{{user.username}}</td>
      <td>{{user.phone}}</td>
       <td>{{user.email}}</td>
       </tr>   
   </table>

Actually, the controller returns the list of data, but angular js cannot get the data. It returns the null values. it cannot integrate with angular js and controller.

var url = $location.absUrl() + "http://localhost:8080/SpringAngular/welcomes"; does not look right. — Dmitry
– Dmitry, Commented Dec 3, 2018 at 12:10

stacker · Accepted Answer · 2018-12-03 12:13:15Z

1

Your controller is not doing what you are expecting: annotating the method with @ResponseBody will wrap the return value of your method in the response body, also produces attribute is wrong. try something like this:

@RequestMapping(value="/welcomes", method = RequestMethod.GET, produces="application/json")
    public @ResponseBody Object welcome(@ModelAttribute UserBean userBean)
    {
        List<UserBean> usernames=new ArrayList<UserBean>();
        usernames = retrievedataservice.findAllUsers(userBean);
        System.out.println(usernames.size());
        return usernames; // you can also do ResponseEntity.ok().body(usernames)
    }

edited Dec 3, 2018 at 12:13

answered Dec 3, 2018 at 12:10

stacker

4,5052 gold badges14 silver badges24 bronze badges

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

1 Comment

Alien Over a year ago

compile time error : your method return type is still ModelAndView but you are returning List<UserBean> which is contradictory

Alien · Accepted Answer · 2018-12-03 12:27:21Z

This will not work as you annotated method as @ResponseBody so it will send response in the body but you are returning modelandview which obviously will not work.

Angular doesn't have to do anything about modelandview but it is expecting json reponse so it will map.

So change the method like below by sending List<UserBean> in response.

@RequestMapping(value="/welcomes", method = RequestMethod.GET, produces="MediaType.application/json")
    public @ResponseBody List<UserBean> welcome(UserBean userBean)
    {
        List<UserBean> usernames=new ArrayList<UserBean>();
        usernames = retrievedataservice.findAllUsers(userBean);
        System.out.println(usernames.size());
        return usernames;
    }

Above change is enough to return response properly to calling environment but you need to make sure that you hit the method properly.

As suggested by @Dmitry var url = $location.absUrl() + "http://localhost:8080/SpringAngular/welcomes"; might not be right.

Collectives™ on Stack Overflow

how to send data from spring controller to angularjs controller with response of data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related