Yet another wasted evening. I can just be zooming along, writing code and making major progress on my squirrel of the moment project. And then Screech! All progress halts while I struggle with something stupid. Here's the story.
My service returns JSON. Nicely formatted JSON, courtesy of Google's
GSON.
[{"id":"eda84f836c71","name":"Will","city":"Fuji","age":"23","sex":"M"},
{"id":"9740ef689ad3","name":"Dina","city":"Salla","age":"26","sex":"F"}]
I wanted to display it in a grid and I remembered seeing a few
JQuery grids that looked easy and claimed they ate JSON. Some of the more popular grids are
jqGrid or
Flexigrid.
Unfortunately, they don't eat
my JSON.
Flexigrid requires JSON to be be in
a muck format like this:
{ "page": 1, "total": 100, "rows": [
{"id":"1", "cell":["content of column 1", "content of column 2",]},
{"id":"2", "cell":["content of column 1", "content of column 2",]}]}
jqGrid's needs to be formatted into
a similar muck like this.
Of course, neither flexigrid or jqGrid's samples or docs clearly state the format of the JSON. They just proudly claim that they eat JSON and then let me waste a good night staring at an empty grid that refuses to load my data. Like always, Mr Google didn't let me down and led me to the posts of similar idiots that struggled with the data format.
Flexigrid has a preProcess property that lets you receive the data and reformat it on the wire.
This Stack Overflow post describes a few diff ways to do this which I tried and had success. It's actually a nice solution
$("#gridContainer").flexigrid({
url: '/YourService.svc/..',
method: 'GET',
dataType: 'json',
preProcess: formatCustomerResults,
...
});
function formatCustomerResults(Customers){
var rows = Array();
for (i = 0; i < Customers.length; i++) {
var item = Customers[i];
rows.push({ cell: [item.DealId,
item.Created,
item.CurrentStatus,
item.LastNote] });
}
return {
total: Customers.length,
page: 1,
rows: rows
};
}
But since I always have to do things my way, I decided that I 'd return formatted JSON from my service. So... First I create a Row class
public class Row {
public Row(int id, Object cell) {
setId(id);
setCell(cell);
}
private int id;
private Object cell;
public void setId(int id) {
this.id = id;
}
public int getId() {
return id;
}
public void setCell(Object cell) {
this.cell = cell;
}
public Object getCell() {
return cell;
}
}
Then a JSON Grid class. The main() method shows how to use. All it needs is the GSON jar which you can download
here and then your own data class. In the main(), I use my own Runner class for example, replace with your own.
import java.util.ArrayList;
import java.util.List;
import com.google.gson.Gson;
public class JsonGrid {
private int page;
private int total;
private List rows;
public JsonGrid(int page, int total, List rows) {
setPage(page);
setTotal(total);
setRows(rows);
}
public static void main(String[] args) {
List runners = new ArrayList();
Runner will = new Runner("Will", "Fuji", "23", "M");
runners.add(will);
Runner dina = new Runner("Dina", "Sala", "22", "F");
runners.add(dina);
int i = 0;
List rows = new ArrayList();
for (Runner runner : runners) {
Row row = new Row(i++, runner);
rows.add(row);
}
JsonGrid grid = new JsonGrid(1, 1, rows);
Gson gson = new Gson();
System.out.println(gson.toJson(runners));
System.out.println();
System.out.println(gson.toJson(grid));
}
public void setPage(int page) {
this.page = page;
}
public int getPage() {
return page;
}
public void setTotal(int total) {
this.total = total;
}
public int getTotal() {
return total;
}
public void setRows(List rows) {
this.rows = rows;
}
public List getRows() {
return rows;
}
}
Here's my Runner class for reference
import java.util.UUID;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;
@PersistenceCapable
public class Runner {
@PrimaryKey
@Persistent
private String id;
@Persistent
private String name;
@Persistent
private String city;
@Persistent
private String age;
@Persistent
private String sex;
public Runner() {
super();
}
public Runner(String name, String age, String sex, String city) {
super();
name = clean(name);
city = clean(city);
age = clean(age);
sex = clean(sex);
this.id = UUID.randomUUID().toString();
this.name = name;
this.city = city;
this.age = age;
this.sex = sex;
}
public void setId(String id) {
this.id = id;
}
public String getId() {
return id;
}
private String clean(String dirty) {
String cleaned = dirty;
cleaned = cleaned.trim();
cleaned = cleaned.replace("'", "");
cleaned = cleaned.replace("?", "");
cleaned = cleaned.replace("*", "");
return cleaned;
}
public String getName() {
return name;
}
public void setName(String name) {
name = clean(name);
this.name = name;
}
public String getCity() {
return city;
}
public void setCity(String city) {
city = clean(city);
this.city = city;
}
public String getAge() {
return age;
}
public void setAge(String age) {
age = clean(age);
this.age = age;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getSex() {
return sex;
}
public String toString()
{
final String TAB = " ";
String retValue = "";
retValue = "Runner ( "
+ super.toString() + TAB
+ "name = " + this.name + TAB
+ "city = " + this.city + TAB
+ "age = " + this.age + TAB
+ "sex = " + this.sex + TAB
+ " )";
return retValue;
}
}
Here's a snippet from a servlet that grabs Runners from my Google App Engine Persistence Manager and returns JSON.
import javax.jdo.PersistenceManager;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
...
public void doGet(HttpServletRequest req, HttpServletResponse response) throws IOException {
...response.setContentType("application/json");
...
// build a query string
String query = "select from " + Runner.class.getName()
+ " where runnerCity=='" + runnerCity + "'";
PersistenceManager pm = PMF.get().getPersistenceManager();
try {
List runners = (List)pm.newQuery(query).execute();
int i = 0;
List rows = new ArrayList();
for (Runner runner : runners) {
Row row = new Row(i++, runner);
rows.add(row);
}
JsonGrid grid = new JsonGrid(1, 1, rows);
Gson gson = new Gson();
response.getWriter().println(gson.toJson(grid));
...
And finally, here's how I load the flexigrid in my client. Change the URL property to point to our own service that returns formatted JSON
...
...
$(".myGrid").flexigrid({
url : 'http://YOUR-SERVICE-URL/?query',
dataType : 'json',
method: 'GET',
colModel : [
{display: 'ID', name: 'id', width: 2, sortable: true, align: 'center', hide: true },
{display: 'Name', name: 'name',width: 200, sortable: true, align: 'left'},
{display: 'City', name: 'city', width: 150, sortable : true, align: 'left'},
{display: 'Age', name: 'age', width : 40, sortable: true, align: 'left'},
{display: 'Sex', name: 'sex', width : 40, sortable: true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator : true}
],
searchitems : [
{display: 'City', name: 'city'},
{display: 'Name', name : 'name', isdefault : true}
],
sortname : "name",
sortorder : "asc",
usepager : true,
title : 'Runners',
useRp : true,
rp : 50,
showTableToggleBtn : true,
width : 700,
height : 200
});
What do you think? Leave a comment.
