How to translate, use JSON in GWT?
I am new to gwt. and need to know how to use JSON in gwt so i try this simple data loader but i'm still confused.
I am creating a project called "tesdb3" in eclipse. I am creating a PHP side to access the database and output as JSON ..
I am creating a userdata.php in the war folder. then I will compile tesdb3 project. Tesdb3 folder and userdata.php in war are moved to local server (I am using WAMP). I put PHP in tesdb3 folder. This is the output from my localhost / phpmyadmin / tesdb3 / userdata.php
[{"kode":"002","nama":"bambang gentolet"}{"kode":"012","nama":"Algiz"}]
From this result, I think the PHP side works well.
Then I create UserData.java as JSNI overlay like this:
package com.tesdb3.client;
import com.google.gwt.core.client.JavaScriptObject;
class UserData extends JavaScriptObject{
protected UserData() {}
public final native String getKode() /*-{ return this.kode; }-*/;
public final native String getNama() /*-{ return this.nama; }-*/;
public final String getFullData() {
return getKode() + ":" + getNama();
}
}
Then finally in tesdb3.java:
public class Tesdb3 implements EntryPoint {
String url= "http://localhost/phpmyadmin/tesdb3/datauser.php";
private native JsArray<UserData> getuserdata(String json)
/*-{
return eval(json);
}-*/;
public void LoadData() throws RequestException{
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
builder.sendRequest(null, new RequestCallback(){
@Override
public void onError(Request request, Throwable exception) {
Window.alert("error " + exception);
}
public void onResponseReceived(Request request,
Response response) {
//1
//data(getuserdata(response.getText()));
//2
JsArray<UserData> uda = JsonUtils.unsafeEval(response.getText())
data(uda);
}
});
}
public void data(JsArray<UserData> data){
for (int i = 0; i < data.length(); i++) {
String lkode =data.get(i).getKode();
String lname =data.get(i).getNama();
Label l = new Label(lkode+" "+lname);
tb.setWidget(i, 0, l);
}
RootPanel.get().add(new HTML("my data"));
RootPanel.get().add(tb);
}
public void onModuleLoad() {
try {
LoadData();
} catch (RequestException e) {
e.printStackTrace();
}
}
}
The result of using both methods in onResponseReceived is the same. Just showing the string "my details".
but method 2 throws an eror like this:
14: 41: 59.875 [ERROR] [tesdb3] Uncorrectable exception com.google.gwt.core.client.JavaScriptException: (SyntaxError): syntax error
Am I missing out on using the second method?
Why didn't method 1 have any error but can't display data?
a source to share
The problem is your JSON has wrong syntax, you are missing a comma after the first element of the table, it should be (spaces added for readability):
[
{
"kode": "002",
"nama": "bambang gentolet"
},
{
"kode": "012",
"nama": "Algiz"
}
]
Since JSON is part of JavaScript, this might be the syntax exception you are getting.
PS: I would recommend using some PHP framework to generate JSON for you (Zend Framework is my usual choice). Additionally, JSON validators like JSONLint are very useful for debugging JSON.
a source to share
It's like a typo in your code that leads me to naming conventions: for variables and methods, the camel case is used, starting with a lower case character. So it UserData UD
should be UserData UD
.
In your method getuserdata
(which should be getuserdata
) you use the parameter name Json
with capital J
and in native code Json
with bottom J
. This explains the error.
About the method getuserdata
. There is a GWT: method JsonUtils.unsafeEval(json)
that you should use.
Also, the code onResponseReceived
appears to be incomplete, it might not be very important as it could be incorrectly quoted in this example, but to be complete, this is what it should look like:
JsArray<UserData> uda = JsonUtils.unsafeEval(response.getText());
for (int i = 0; i < uda.length(); i++) {
UserData ud = uda.get(i);
String lKode = ud.getKode();
String lName = ud.getNama();
Label l = new Label(lKode + " " +lName);
RootPanel.get().add(l);
}
a source to share