Mapping JSON data in JQGrid

Question

Hi ,

I am using jqGrid 3.6.4 and a jquery 1.4.2 . in my sample i am getting following json data format & i want to map these json data into rows of a jqgrid

{
"page": "1",
"total": 1,
"records": "6",
"rows": [
    {
        "head": {
            "student_name": "Mr S. Jack ",
            "year": 2007

        },
        "sub": [
            {
                "course_description": "Math ",
                "date": "22-04-2010",
                "number": 1,
                "time_of_add": "2:00",
                "day": "today"
            }
        ]

      }
]
}

my jqgrid code is as follows

jQuery("#"+subgrid_table_id).jqGrid({
url:"http://localhost/stud/beta/web/GetStud.php?sid="+sid,
dtatype: "json",
colNames: ['Stud Name','Year','Date'.'Number'],
colModel: [ {name:'Stud Name',index:'student_name', width:100, jsonmap:"student_name"},
{name:'Year',index:'year', width:100, jsonmap:"year"},
{name:'Date',index:'date', width:100, jsonmap:"date"},
{name:'Number',index:'number', width:100, jsonmap:"number"}
],
height:'100%',
jsonReader: { repeatitems : false, root:"head" },
});

So now the problem is as my data i.e. student_name and year is under "head" , the jqgrid is enable to locate these two fields. at the same time other two column values i.e. Date and Number lies under "sub" and even those columns i am not be able to map it with jqgrid

so kindly help me how to located these attributes in JQGrid.

Thanks

Answer 1

First of all the code posted has some errors like dtatype: "json" instead of datatype: "json". "},});" instead of "}});" at the end of code and colNames: ['Stud Name','Year','Date'.'Number'] instead of colNames: ['Stud Name','Year','Date','Number']. After fixing this clear bugs you need change jsonmap. This was you main question. The fixed code will be look like following:

jQuery("#"+subgrid_table_id).jqGrid({
    ...
    datatype: 'json',
    colModel: [
        {name:'Stud Name',index:'student_name', width:100, jsonmap:"head.student_name"},
        {name:'Year',index:'year', width:100, jsonmap:"head.year"},
        {name:'Date',index:'date', width:100, jsonmap:"sub.0.date"},
        {name:'Number',index:'number', width:100, jsonmap:"sub.0.number"}
    ],
    jsonReader: { repeatitems : false, root:"rows" }
});

You have to fix root to "rows" and use jsonmap in JSON dot notation (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_dot_notation). I use a little strange notation like "sub.0.number" because sub.0.number in JavaScript is the same as sub[0].number. It works now.

I recommend you think one more about the structure of JSON data which you receive. (see my previous comments to you question): Is "sub" element is really an array with always one element or you want to use subgrids? Probably the data should be changed from sub:[{"":"", ...}] to sub:{"":"", ...}? What do you want to use as a row id? student_name? Then add id: "head.student_name" to the jsonReader definition. Or you forget to include is in the JSON data?

And the last suggestion. If you open http://trirand.com/blog/jqgrid/jqgrid.html and opens on the left side of tree the branch "Data Mapping" \ "Data optimization" you will see an example where on use only array instead of named elements in JSON. Such data will be have minimum size and can be transferred more quickly from server to client. You data instead have some fields (like "course_description") which you don't use at all. So if you can make any changes in the server code try to optimize the data transfer rate.