yui datatable error

Question

I have a problem with json data insertion in my DataTable. Here an example of json data send by server :

{"geneItemList":"{"col":"symbol","qv":"cd4","limit":"-1","start":"0","geneid":"920","name":"CD4"
,"symbol":"CD4","lastupdated":"2009-05-20 10:01:52.0","lastmodified":"2009-05-20 11:12:37.0"}
,...

And here my YUI code :

 <script type="text/javascript">
    YAHOO.namespace("local");
    var qct = YAHOO.local;


        YAHOO.util.Event.addListener(window, "load", function() {
            qct.RowSelection = function() {
                var myColumnDefs = [
                    {key:"geneid", label:"Gene", formatter: "number", sortable:true},
                    {key:"name", label:"Name", sortable:true},
                    {key:"symbol", label:"Symbol", sortable:true},
                    {key:"lastupdated", label:"Last Updated", formatter:"date", sortable:true},
                    {key:"lastmodified", label:"Last Modified", formatter:"date", sortable:true}
                ];

                var myDataSource = new YAHOO.util.DataSource("qct-list.html");
                myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                myDataSource.connXhrMode = "queueRequests";
                myDataSource.responseSchema = {
                    resultsList: "geneItemList",
                    fields: [{key:"col", parser:"string"},
                             {key:"qv", parser:"string"},
                             {key:"limit", parser:"number"},
                             {key:"start", parser:"number"},
                             {key:"geneid", parser:"number"},
                             {key:"name", parser:"string"},
                             {key:"symbol", parser:"string"},
                             {key:"lastupdated", parser:"date"},
                             {key:"lastmodified", parser:"date"}]
                };

                // test this
                var myGeneListTable = new YAHOO.widget.DataTable("geneListTable", myColumnDefs, myDataSource,
                {initialRequest:"?col=<c:out value="${fieldName}"/>&qv=<c:out value="${queryValue}"/>&start=<c:out value="${start}"/>&limit=<c:out value="${limit}"/>", selectionMode:"single"});
etc...

When I test my page, I have "Data error." in my datatable !

An idea on what is wrong? Thanks

Answer 1

I found the solution to my problem. It was a mistake to json !

Bad : {"geneItemList":"{"col":"symbol","qv":"cd4","limit":"-1","start":"0","geneid":"920","name":"CD4" ,"symbol":"CD4","lastupdated":"2009-05-20 10:01:52.0","lastmodified":"2009-05-20 11:12:37.0"} ,...

Good : {"geneItemList":[{"col":"symbol","qv":"cd4","limit":"-1","start":"0","geneid":"920","name":"CD4" ,"symbol":"CD4","lastupdated":"2009-05-20 10:01:52.0","lastmodified":"2009-05-20 11:12:37.0"} ,...}] }

It was just a syntax problem ! If you have a "data error" with YUI DataTable, the first thing to do is look at the JSON response from the server.

Answer 2

Data error: I am also getting same error. If i use like this also {"geneItemList":[{"col":"symbol","qv":"cd4","limit":"-1","start":"0","geneid":"920","name":"CD4" ,"symbol":"CD4","lastupdated":"2009-05-20 10:01:52.0","lastmodified":"2009-05-20 11:12:37.0"} ,...}] }

Still same error.An idea on what is wrong?

Answer 3

Some tools can help to debug your JSON !

You can use : http://www.jsonlint.com/ (to track your errors)

Syntax help : http://en.wikipedia.org/wiki/JSON

Another tips, is using yui debug mode, when testing new script.

Ex : .../json-debug.js

Answer 4

What if you don't have control over which service you want to consume? For instance, our existing service will output in the format:

[{"CustomerID":"ALFKI","CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Region":null,"PostalCode":"12209","Country":"Germany","Phone":"030-0074321","Fax":"030-0076545"},{"CustomerID":"ANATR","CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitución 2222","City":"México D.F.","Region":null,"PostalCode":"05021","Country":"Mexico","Phone":"(5) 555-4729","Fax":"(5) 555-3745"}]

This doesn't have the format of defining the resultsList for the datasource.. Any ideas?