I am doing a client management system java web application and I trying to display all the category from my DB:Mysql. I created a few class, 1 servlets and 1 html. Could someone kindly teach me how do I display the JSON objects output from the servlets inside the html5 table(html file)? Many thanks.
This is the category Object class.
package dto;
public class CategoryObjects {
private String category_id;
private String category_name;
private String category_desc;
public String getCategory_id() {
return category_id;
}
public void setCategory_id(String category_id) {
this.category_id = category_id;
}
public String getCategory_name() {
return category_name;
}
public void setCategory_name(String category_name) {
this.category_name = category_name;
}
public String getCategory_desc() {
return category_desc;
}
public void setCategory_desc(String category_desc) {
this.category_desc = category_desc;
}
}
this is the data access object where the sql statements
package dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dto.CategoryObjects;
public class catProject {
public ArrayList<CategoryObjects>GetCategory(Connection connection,HttpServletRequest request,HttpServletResponse response) throws Exception{
ArrayList<CategoryObjects>categoryData = new ArrayList<CategoryObjects>();
try{
PreparedStatement ps = connection.prepareStatement("SELECT `category_id`, `category_name`, `category_desc` FROM `category` ORDER BY `category_id` DESC");
ResultSet rs = ps.executeQuery();
while(rs.next()){
CategoryObjects catObject = new CategoryObjects();
catObject.setCategory_id(rs.getString("category_id"));
catObject.setCategory_name(rs.getString("category_name"));
catObject.setCategory_desc(rs.getString("category_desc"));
categoryData.add(catObject);
}
return categoryData;
}
catch(Exception e){
throw e;
}
}
}
this is my model package where I validate
package model;
import java.sql.Connection;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dto.CategoryObjects;
import dao.catProject;
public class ProjectCategory {
public ArrayList<CategoryObjects> GetCategory(Connection connection, HttpServletRequest request,
HttpServletResponse response) throws Exception {
ArrayList<CategoryObjects> category = null;
try{
catProject projectcat = new catProject();
category=projectcat.GetCategory(connection, request, response);
}catch (Exception e){
throw e;
}
return category;
}
}
this is my servlets
package controls;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import dao.Database;
import model.ProjectCategory;
import dto.CategoryObjects;
/**
* Servlet implementation class GetCategory
*/
@WebServlet("/GetCategory")
public class GetCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public GetCategory() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try{
Database database =new Database();
ProjectCategory projectcategory = new ProjectCategory();
ArrayList<CategoryObjects> catData = null;
Connection connection = database.Get_Connection();
catData = projectcategory.GetCategory(connection,request,response);
Gson gson = new Gson();
System.out.println(gson.toJson(catData));
String category = gson.toJson(catData);
out.println("{\"Messages\":"+category+"}");
}
catch (Exception ex)
{
out.println("Error: " + ex.getMessage());
}
finally
{
out.close();
}
}
}
The servlets is giving this output:
{"Messages":[{"category_id":"3","category_name":"anger management","category_desc":"for people who always get angry"},{"category_id":"2","category_name":"lazy management","category_desc":"for people who are very lazy"},{"category_id":"1","category_name":"Self-development","category_desc":"for people who are very lazy"}]}
How do I from this out pass the data to my manageCategory.html file where I can store this data in of table??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>I'MPOSSIBLE - Manage Categories</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/home.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- tablesorter theme file-->
<link rel="stylesheet" href="css/theme.default.css">
</head>
<body>
<!-- start of navigation bar -->
<nav id="navMenu"></nav>
<!-- End of navigation bar -->
<div class="container">
<div class="jumbotron text-center">
<div class="container-fluid">
<div class="panel panel-default">
<h1>Manage Category</h1>
<ul class="breadcrumb">
<li><a href="adminIndex.html">Home</a></li>
<li class="active"><a href="manageCategory.html">Manage
Category</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Category List</h3>
</div>
<div class="panel-body">
<div class="pull-right">
<!-- Icons for delete, edit and copy -->
<p class="icons">
<a href="addCategory.html"><button type="button"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-plus"></span> Add
</button></a>
<button type="button" class="btn btn-default btn-sm"
onclick="confirm('Delete/Uninstall cannot be undone! Are you sure you want to do this?') ? $('#form-product').submit() : false;">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
<a href="editCategory.html"><button type="button"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span> Edit
</button></a>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-copy"></span> Copy
</button>
</p>
</div>
<form action="#" method="post" enctype="multipart/form-data"
id="form-category">
<div class="table-responsive">
<table id="myTable"
class="table table-bordered table-hover tablesorter">
<thead>
<tr>
<td style="width: 1px;" class="text-center"
data-sorter="false"><input type="checkbox"
onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
<td class="text-left"><a href="#" class="asc">Category
Name</a></td>
<td class="text-left"><a href="#" class="asc">Category Description</a></td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><input type="checkbox"
name="selected[]" value="33" /></td>
<td class="text-left">Couples Counselling</td>
<td class="text-left">For couples</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox"
name="selected[]" value="25" /></td>
<td class="text-left">Family Counseling</td>
<td class="text-left">For Family</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox"
name="selected[]" value="29" /></td>
<td class="text-left">Individual Counselling</td>
<td class="text-left">For Individuals</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox"
name="selected[]" value="28" /></td>
<td class="text-left">Child and Youth Counselling</td>
<td class="text-left">For child and youth</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox"
name="selected[]" value="35" /></td>
<td class="text-left">Adjustment/Transition Change
Counselling</td>
<td class="text-left">For adjustment</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox"
name="selected[]" value="36" /></td>
<td class="text-left">Grief Counselling</td>
<td class="text-left">For grief</td>
</tr>
</tbody>
</table>
</div>
</form>
<div class="row">
<div class="col-sm-6 text-left">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<div class="col-sm-6 text-right">Showing 1 to 20 of 38 (2
Pages)</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <End> -->
<!-- Start of <Fixed footer> -->
<!-- end of body container -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>©COPYRIGHT 2015 I'MPOSSIBLE</p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> <a
href="#"><i class="fa fa-twitter-square fa-2x"></i></a> <a href="#"><i
class="fa fa-google-plus fa-2x"></i></a> <a href="#"><i
class="fa fa-linkedin-square fa-2x"></i></a>
</div>
</div>
</div>
<!-- Start of <Fixed footer> -->
<footer id="footerMenu"></footer>
<!-- End of <Fixed footer> -->
<script src="js/navlinks-admin.js"></script>
<script src="js/footer.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<!-- load jQuery and tablesorter scripts -->
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>
<script>
<!-- Start by telling tablesorter to sort your table when the document is loaded: -->
$(function(){
$("#myTable").tablesorter();
});
<!-- pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order. -->
$(function(){
$("#myTable").tablesorter({ sortList: [ [1,0], [2,0],] });
});
</script>
</body>
</html>
