JSON data from servlet to jqGrid not displaying

Question

I am new to jQuery and finding difficulty in displaying data from my servlet to jqGrid in my jsp. I have used google gson to convert data from ArrayList to a String variable json. It's displaying json data in the console when I run the project and displaying an empty grid.

Student.java

package com
public class Student {
private String name;
 private String mark;
 private String address;
//getter and setters

StudentDataService.java

package com;

import java.util.ArrayList;
import java.util.List;

import com.Student;

public class StudentDataService {

public static List<Student> getStudentList() {

      List<Student> listOfStudent = new ArrayList<Student>();

      Student aStudent = new Student();

      for (int i = 1; i <= 10; i++) {

       aStudent = new Student();

       aStudent.setName("R" + i);

       aStudent.setMark("20" + i);

       aStudent.setAddress("pune "+i);

       listOfStudent.add(aStudent);
      }

      return listOfStudent;

     }
}

My servlet code:

StudentDataServlet.java

package com;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.Student;
import com.StudentDataService;

/**
 * Servlet implementation class StudentDataServlet
*/
public class StudentDataServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public StudentDataServlet() {
    super();
}

protected void doGet(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException     { 

    response.setContentType("application/json");
    PrintWriter out = response.getWriter();

    List<Student> lisOfStudent = StudentDataService.getStudentList();
    Gson gson = new GsonBuilder().setPrettyPrinting().create();
    String json = gson.toJson(lisOfStudent);
    out.print(json);
    System.out.println(json);

}

protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException    {

    doGet(request, response);
}
 }

My JSP page:

slickGridDemo.jsp

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jqGrid Example</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.8.14/jquery-ui.js"> 
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css"  href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-  en.js"></script>
<script type='text/javascript'  src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<style type='text/css'>
</style>



<script type='text/javascript'>
jQuery(document).ready(function () {

         jQuery("#grid").jqGrid({
             url: "http://localhost:9080/JquerySlickGrid/StudentDataServlet",
             datatype: "json",

             jsonReader: {repeatitems: false, id: "ref"},
             colNames:['Name','Marks', 'Address'],
             colModel:[
                 {name:'Name',index:'Name', width:100},
                 {name:'Marks',index:'Marks', width:100},
                 {name:'Address',index:'Address', width:500}
             ],
             rowNum:20,
             rowList:[20,60,100],
             height:460,
             pager: "#pagingDiv",
             viewrecords: true,
             caption: "Json Example"
         });
     });
</script>
</head>
<body>
<table id="grid"></table>
<div id="pagingDiv"></div>
</body>
</html>

Vinoth Krishnan Vinoth Krishnan · Accepted Answer · 2013-09-26T10:10:44

I had the same issue initially. I solved like converting json into local data, This is how i am populating json data into jqgrid. It may helps you.

function getReport() {
$.ajax({
            url : "totalSalesReport.do?method=searchSpendReport"
    type : "POST",
    async : false,
    success : function(data) {
        $("#gridtable").jqGrid('GridUnload');

                   var newdata = jQuery.parseJSON(data);

                $('#gridtable').jqGrid({
            data : newdata,
            datatype : 'local',
            colNames : [ 'Name', 'Year', 'Period'],
            colModel : [ {
                name : 'name',
                index : 'name'
            }, {
                name : 'year',
                index : 'year'
            }, {
                name : 'period',
                index : 'period'
            }],
            rowNum : 10,
            rowList : [ 10, 20, 50 ],
            pager : '#pager',
            shrinkToFit : false,
            autowidth : true,
            viewrecords : true,
            height : 'auto'
        }).jqGrid('navGrid', '#pager', {
    add : false,
    edit : false,
    del : false,
    search : false,
    refresh : false
},

{}, /* edit options */
{}, /* add options */
{}, /* del options */
{});
}});}

Let me know if you need further assistance in getting data from jsp page.

Updated Ans :

I am using jsp for formatting the List data to json array. The piece of code is given below. You need to add json object jar file for this purpose.

<%@page import="java.sql.ResultSet"%>
<%@page import="java.util.*,java.util.ArrayList"%>
<%@page import="org.json.simple.JSONObject"%>
<%
net.sf.json.JSONObject responcedata = new net.sf.json.JSONObject();
net.sf.json.JSONArray cellarray = new net.sf.json.JSONArray();
net.sf.json.JSONArray cell = null; //new net.sf.json.JSONArray();
net.sf.json.JSONObject cellobj = null; //new net.sf.json.JSONObject();

List<ReportDto> reportDtos = null;
if (session.getAttribute("agencyReport") != null) {
    reportDtos = (List<ReportDto>) session
    .getAttribute("agencyReport");
}

ReportDto reportDto = null;

int i = 0;
if (reportDtos != null) {
    for (int index = i; index < reportDtos.size(); index++) {
        reportDto = reportDtos.get(index);
        cellobj = new net.sf.json.JSONObject();
        cell = new net.sf.json.JSONArray();
        cellobj.put("name", reportDto.getVendorName());
        cellobj.put("year", reportDto.getSpendYear());
        cellobj.put("period",reportDto.getReportPeriod());
        cellarray.put(cellobj);
        i++;
    }
    out.println(cellarray);
}
%>

JSON data from servlet to jqGrid not displaying

2 Answers