How to use response object from Spring controller in Angularjs

Question

I am trying to display the objects' data passed as an ArrayList response. I am able to see the content of the objects but unable to use it in the angularjs view. Here is my Spring controller method:

@RequestMapping(value = "/page2", method = RequestMethod.POST)
    public @ResponseBody ArrayList<ConceptModelDetails> getAllTasks() {
            ArrayList<ConceptModelDetails> list = new ArrayList<ConceptModelDetails>();
            ApplicationContext context = new ClassPathXmlApplicationContext(
                            "Spring-module.xml");
            JDBCConceptModelDAO objDAO = (JDBCConceptModelDAO) context
                            .getBean("objDAO");
            list = objDAO.getData();
            return list;
    }

Here is the view page2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.mi n.js"></script>
</head>
<body>
    <form action="page2" method="post">
            <h1>
                    Success: <input type="submit" value="See Data">
            </h1>
    </form>
    <div ng-app="myApp" ng-controller="controller">

            <table>
                    <tr ng-repeat="x in object">
                            <td>${ x.requestor }</td>
                    </tr>
            </table>
    </div>

    <script>
            var app = angular.module('myApp', []);
            app.controller('controller', function($scope, $http) {
                                            $http.post("page2")
                                                            .success(function(response) {
                                                                    $scope.object = response.records;                                                                        
                                                            console.log(response);
                                                            });                        

            });
    </script>

After clicking on see Data, I am getting the following output:

But I want to display the data in a table.

You could use external modules like UI-Grid github.com/angular-ui/ui-grid — michelem
– michelem, Commented Nov 17, 2015 at 8:15
I think you should take a look at spring.io/blog/2015/08/19/…, currently you are doing something definitely wrong with the concept. — codeaholicguy
– codeaholicguy, Commented Nov 17, 2015 at 8:38

npe · Accepted Answer · 2015-11-17 08:50:28Z

1

The response object is just a JavaScript array of objects. You can then bind it to an ngGrid component to render it.

In html:

<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions">
    </div>
</body>

In JavaScript:

$scope.conceptModelDetailsList = response;
$scope.gridOptions = { data: 'conceptModelDetailsList' };

Note that this is just one way to do it. There are many different way to render the list like this.

answered Nov 17, 2015 at 8:50

npe

15.8k1 gold badge59 silver badges59 bronze badges

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

Comments

SyntaX · Accepted Answer · 2015-11-17 09:01:58Z

You are doing a fundamental mistake here.

Please understand the Spring MVC concept well. These tutorials will help you in understanding this.

In the above code public @ResponseBody ArrayList<ConceptModelDetails> getAllTasks(){...} the method returns ArrayList<ConceptModelDetails>. This is converted into JSON due to the presence of @ResponseBody.

Now you have to consume it in AngularJS grid-ui using the AJAX call. Explaining you the same here is out of scope, please learn angular from the W3School AngularJS Tutorial

Once you are familiar with Spring MVC and REST API concepts in Spring, look into Angular UI Grid to display the JSON data.

If you just want to display the ArrayList in a view, please learn about the Model and how to iterate it in JSTL. This is explained in the above spring tutorials.

This is a long process, there is no shortcut to become a developer!

Hope it helps!

Collectives™ on Stack Overflow

How to use response object from Spring controller in Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related