how to get values from spring controller to Angular js

Question

How to get this value in angular js page to display the details in JSP page.please some one help to get this value and view it in Angular JS using Ajax call.

@Controller

public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;
    @RequestMapping(value = "/iwill", method = RequestMethod.GET)
    public ModelAndView searchd() {


        return new ModelAndView("search");
    }


     @RequestMapping(value = "/search", method = RequestMethod.GET)
     public @ResponseBody void  search(HttpServletResponse res,HttpServletRequest req) throws IOException {

     List<Employee> data =  employeeService.listEmployeess();
       JSONArray array = new JSONArray();
           for (Employee e : data) {
               JSONObject jsonObject = new JSONObject(e);
               array.put(jsonObject);
           }
        res.getWriter().append(array.toString());

       }
    }

my Angular js page:

Here i do no how to get my data.if i simply (http://localhost:8080/sdnext/search.html )use this url its showing json data if i implement in angular js its not throwing error but no data's get displayed.

  <!doctype html>
<html >
    <head>
        <title>Spring MVC + AngularJS Demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script>
        function Hello($scope, $http) {
            $http.get('http://localhost:8080/sdnext/search.html').
                success(function(response) {
                    $scope.employees = response.data;
                });
        }
        </script>
    </head>
    <body ng-app="app">

        <table>
        <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>salary</th>
        <th>Address</th>
        <th>BloodGrp</th>
        <th>Aids</th>
        <th>Weight</th>
        </tr>
        <tr>

<tbody  ng-controller="Hello">
 <tr ng-repeat="employee in employees"> 
 <td>{{employee.empId}}</td>
  <td>{{employee.empName}}</td>
   <td>{{employee.empAge}}</td> 
   <td>{{employee.salary}}</td> 
   <td>{{employee.empAddress}}</td>
    <td>{{employee.bloodgrp}}</td> 
    <td>{{employee.aids}}</td>
     <td>{{employee.weight}}</td> 
     </tr> </tbody> 
            </table>

    </body>
</html>

**

My JSON response i given below: This im getting while using the url http://localhost:8080/sdnext/search.html but i dono how to use this in Angular js to display my data in jsp page.

**

[{"empId":1,"bloodgrp":"0-ve","empName":"krishnaKumars","weight":78,"aids":"negative","empAge":23,"salary":15000,"empAddress":"madurai"},{"empId":2,"bloodgrp":"o-ve","empName":"Archanasundar","weight":68,"aids":"Negative","empAge":31,"salary":50000,"empAddress":"chennai"},{"empId":4,"bloodgrp":"o-ve","empName":"Kabali","weight":78,"aids":"negative","empAge":23,"salary":201300,"empAddress":"Madurai"}]

Panos K · Accepted Answer · 2017-11-23 10:12:24Z

1

you need to make an ajax request from angular $http.get at "/search"

this would work

@RequestMapping(value = "/search", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)

     public List<Employee> search( ) throws IOException {

     return  employeeService.listEmployeess();

       }

you got a mistake there

function Hello($scope, $http) {
            $http.get('http://localhost:8080/sdnext/search.html').
                success(function(response) {
                    $scope.employees = pesponse;
                });
        }

$scope.employees = response.data is the correct one

should be like this

<script>
angular.module("app",[])
        .controller("Hello",function ($scope,$http){
     $scope.getData = function() {
            $http.get('http://localhost:8080/sdnext/search.html').
                success(function(response) {
                    $scope.employees = response.data;
                });
        }
    });

        </script>

also

<tbody  ng-controller="Hello" ng-init="getData ()">

check these tell me if that worked

edited Nov 23, 2017 at 10:12

answered Nov 23, 2017 at 7:47

Panos K

1,0911 gold badge13 silver badges27 bronze badges

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

17 Comments

Guvaliour Over a year ago

if i write produces it showing error (The attribute produces is undefined for the annotation type RequestMapping)

Panos K Over a year ago

try this produces=MediaType.APPLICATION_JSON_VALUE

Guvaliour Over a year ago

Its asking me to change as header,param

Guvaliour Over a year ago

please bro help im stucked for 2 weeks im new to spring mvc fresher

Guvaliour Over a year ago

Please any on help me its difficult for me to do

|

Collectives™ on Stack Overflow

how to get values from spring controller to Angular js

Here i do no how to get my data.if i simply (http://localhost:8080/sdnext/search.html )use this url its showing json data if i implement in angular js its not throwing error but no data's get displayed.

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here i do no how to get my data.if i simply (http://localhost:8080/sdnext/search.html )use this url its showing json data if i implement in angular js its not throwing error but no data's get displayed.

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related