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.
2 answers
solution1
1 2015-11-17 08:50:28
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.
solution2
1 2015-11-17 09:01:58
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.