Search code examples
springspring-mvcangularjs-service

How to connect Angular JS with spring mvc using $http service to get data from controller to jsp


    My Controller:

How to get values from spring MVC to Angular js to display in jsp page. Below i posted my spring MVC and Angular js config code.Please some one help how to grt values from Spring controller.how to get url path of our controller.

    package com.dineshonjava.controller;

    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;






    import org.hibernate.SessionFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.validation.BindingResult;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;

    import com.dineshonjava.bean.EmployeeBean;
    import com.dineshonjava.model.Employee;
    import com.dineshonjava.service.EmployeeService;


    @Controller
    public class EmployeeController {

        @Autowired
        private EmployeeService employeeService;







        @RequestMapping(value = "/search", method = RequestMethod.GET)
        public Map<String, Object> search(@ModelAttribute("command")  EmployeeBean employeeBean,
                BindingResult result) {

            Map<String, Object> model = new HashMap<String, Object>();
            model.put("employees",  prepareListofBean(employeeService.listEmployeess()));


            return (model);
        }




        private List<EmployeeBean> prepareListofBean(List<Employee> employees){
            List<EmployeeBean> beans = null;
            if(employees != null && !employees.isEmpty()){
                beans = new ArrayList<EmployeeBean>();
                EmployeeBean bean = null;
                for(Employee employee : employees){
                    bean = new EmployeeBean();
                    bean.setName(employee.getEmpName());
                    bean.setId(employee.getEmpId());
                    bean.setAddress(employee.getEmpAddress());
                    bean.setSalary(employee.getSalary());
                    bean.setAge(employee.getEmpAge());
                    bean.setBloodgrp(employee.getBloodgrp());
                    bean.setAids(employee.getAids());
                    bean.setWeight(employee.getWeight());
                    bean.setPass(employee.getPass());
                    beans.add(bean);
                }
            }
            return beans;
        }


    }



    Angular js page:

This is my angular js page here i try to get data's from Spring mvc controller but it fails . please explain how to get data from spring MVC .im new to angular js and spring mvc this is my task im fresher .

<html>
<head>
<script>
    var app = angular.module('angularjsTable', ['angularUtils.directives.dirPagination']);
     app.controller('listitemdata',function($scope, $http){
         $scope.employees = []; 
         $http.get("http://localhost:8080/sdnext/search").success(function(response){ 
             $scope.employees = response; 
});
});
</script>
</head>
<tbody>
<tr dir-paginate="employee in employees">

<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.salary}}</td>
<td>{{employee.address}}</td>
<td>{{employee.bloodgrp}}</td>
<td>{{employee.aids}}</td>
<td>{{employee.weight}}</td>
</tr>
</tbody>

</html>

Solution

  • Dont use any model just send data In response and convert List Of DTO Object in json

     @RequestMapping(value = "/search", method = RequestMethod.GET)
          public void  search(HttpServletResponse res,HttpServletRequest req) {
    
          List<EmployeeBean> data =  employeeService.listEmployeess();
            JSONArray array = new JSONArray();
                for (EmployeeBean e : data) {
                    JSONObject jsonObject = new JSONObject(e);
                    array.put(jsonObject);
                }
             response.getWriter().append(array.toString());
            }
    

    in pom.xml for jsonObject

     <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20160810</version>
            </dependency>