Question

I have been trying to render JSON data in a JQGrid. I get the following error:

Error: b is undefined
Source File: http://localhost:1302/Scripts/jquery.jqGrid.min.js
Line: 23

When I use the un-minimized JQGrid source code I see that it makes multiple calls to the getAccessor method and on the last call the first parameter to the method (obj) is passed an undefined value:

Error: obj is undefined
Source File: http://localhost:1302/Scripts/jquery.jqGrid.src.js
Line: 151

That seems to be what’s causing the grid to stop rendering, but why?

The rendered grid shows the column headings but the no contents. The “Loading…” message in the grid never disappears.

My JSON data look like this:

{
   "total":"1",
   "page":"1",
   "userdata":{

   },
   "records":"2",
   "rows":[
      {
         "DateOfBirth":"11/04/2012 12:00:00 AM",
         "DisambiguationNote":"Boring guy",
         "FirstName":"Joe",
         "LastName":"Bloggs",
         "MiddleName":"Binkie",
         "PersonId":"1"
      },
      {
         "DateOfBirth":"01/01/2001 12:00:00 AM",
         "DisambiguationNote":"someone else",
         "FirstName":"Edna",
         "LastName":"Edwards",
         "MiddleName":"Edith",
         "PersonId":"8"
      }
   ]
}

My grid code looks like this:

$(function () {
    $("#persongrid").jqGrid({
        url: '/Person/List',
        datatype: 'json',
        mtype: 'GET',
        jsonreader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "5"  ,
            cell: ""  ,
            userdata: "userdata"
        },
        colModel: [
            { name: 'DateOfBirth', index: 'DateOfBirth',sorttype:'date' },
            { name: 'DisambiguationNote', index: 'DisambiguationNote' },
            { name: 'FirstName', index: 'FirstName' },
            { name: 'LastName', index: 'LastName' },
            { name: 'MiddleName', index: 'MiddleName' },
            { name: 'PersonId', index: 'PersonId',sorttype:'int' }
        ],
        pager: '#persongridpager',
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        gridview: true,
        caption: 'People'
    });
});

I can see that the JSON data is being retrieved as above from the AJAX request, and I have been through the JSON data instructions for JQGrid quite carefully but can’t see what I’m doing wrong.

Can anyone help? Thank you.

Answer 1

The error is very easy, but it’s difficult to find: you use jsonreader instead of jsonReader and so the jsonreader will be ignored and the default jsonReader will be used.

How you can see on the demo the data will be successfully read after the modification.

By the way, you can specify only the properties of jsonReader which are different from defaults and use

jsonReader: {
    repeatitems: false,
    id: "5",
}

or

jsonReader: {
    repeatitems: false,
    id: "PersonId",
}

I added to the demo height: 'auto' option only to improve the visibility.