This code returns a json for an html page that uses an ajax feature to load a Google API chart I would like to do the same but using a Spring controller!
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
List<Student> listOfStudent = getStudentData();
Gson gson = new Gson();
String jsonString = gson.toJson(listOfStudent);
response.setContentType("application/json");
response.getWriter().write(jsonString);
}
This snippet of code has been taken from this site .
I'd love to do that using spring with thymeleaf!
Here is the chime of my page that calls the controller:
<li><a href="#" th:href="@{/student/jsonData}">Chart Student</a></li>
I created this class:
public class Student {
private String name;
private int computerMark;
private int mathematicsMark;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getComputerMark() {
return computerMark;
}
public void setComputerMark(int computerMark) {
this.computerMark = computerMark;
}
public int getMathematicsMark() {
return mathematicsMark;
}
public void setMathematicsMark(int mathematicsMark) {
this.mathematicsMark = mathematicsMark;
}
Here is the controller class I tried to do but it does not work:
import java.util.ArrayList;
import java.util.List;
import com.google.gson.Gson;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("student")
public class StudentJsonData {
@RequestMapping(value = "/jsonData", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody
ModelAndView showChart() {
ModelAndView view = new ModelAndView("student/visualization-chart-demo");
List<Student> listOfStudent = getStudentData();
Gson gson = new Gson();
String jsonString = gson.toJson(listOfStudent);
view.addObject("jsonString", jsonString);
return view;
}
private List<Student> getStudentData() {
List<Student> listOfStudent = new ArrayList<Student>();
Student s1 = new Student();
s1.setName("Sandeep");
s1.setComputerMark(75);
s1.setMathematicsMark(26);
listOfStudent.add(s1);
Student s2 = new Student();
s2.setName("Bapi");
s2.setComputerMark(60);
s2.setMathematicsMark(63);
listOfStudent.add(s2);
Student s3 = new Student();
s3.setName("Raja");
s3.setComputerMark(40);
s3.setMathematicsMark(45);
listOfStudent.add(s3);
Student s4 = new Student();
s4.setName("Sonu");
s4.setMathematicsMark(29);
s4.setComputerMark(78);
listOfStudent.add(s4);
return listOfStudent;
}
}
In the js file of the article I just modified this line of the whole code:
$.ajax({
url: "/springsecurity/student/jsonData",
...
...
This is my page where I wanted to render the chart:
<html
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Google Visualization Chart Demo</title>
</head>
<body>
<div id="student-bar-chart"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript" src="https://www.google.com/jsapi"></script><scriptth:src="@{/resources/js/visualization-chart-script.js}" ></script>
</body>
</html>
I'm definitely making a mess on this controller of mine !! I put the attribute produces="application / json" because I want to return a json. I've researched this all over the place and could not find it! I've tried everything, but I can not display the chart on the page !! Of course the problem should be my method of the controller, because in the application through the menu I call it the method that returns a view that is the page where I want to display the data, and this page has the js file that has the jquery that it owns ajax using the url that I modified from the file to call / springsecurity / student / jsonData.
I think that's the point where I get lost.