jqGrid and JSON reader

Question

I'm fairly new to jQuery and just started working with jqGrid. I've looked over the jqGrid docs in order to figure out how to display some data I'm receiving back in JSON format within my grid to no avail. When I create the grid, it displays with the correct headers, pager info, etc and via Firebug and I can see the request and response of the JSON data. The jsonReader below is one of many I've tried and in the function callbacks I can log the specific values I'm receiving back so I know I'm getting the data.

What is the proper way for me to get the JSON specified below loaded into the jqGrid?

Here's the relevant code:

HTML:

<div id="dataInfo">
    <table id="dataTable"></table>
    <div id="dataTablePager"></div>
</div>

JS

jQuery("#dataTable").jqGrid({
              url: 'http://<snip>',
              mtype: 'GET',
              datatype: 'json',
              jsonReader: {
                  root: 'ipResponses',
                  id: 'startIP',
                  repeatitems: false,
                  page:  function(obj) { return 1; },
                  total: function(obj) { return 1; },
                  records: function(obj) { return obj.ipInfo.ipResponses.length; },
                  userdata: "userData"
              },
              colNames: ['StartIP', 'EndIP'],
              colModel: [
                  {
                      name: 'startIP',
                      index: 'startIP',
                      width: 55
                  }, 
                  {
                      name: 'endIP',
                      index: 'endIP',
                      width: 55
                  }
              ],
              pager: '#dataTablePager',
              rowNum: 8,
              rowList: [25,50,100],
              sortname: 'startIP',
              sortorder: 'asc',
              viewrecords: true,
              caption: 'Data',
              pgtext:"Page {0}"
          });

JSON

{
    "ipInfo": { 
        "queryStartIP": "4.4.4.0", 
        "queryEndIP": "4.4.4.256", 
        "ipResponses": [
            { "startIP": "4.4.4.1", "endIP": "4.4.4.5"},
            { "startIP": "4.4.4.10", "endIP": "4.4.4.15"}
        ]
    }
}

Solution

Your main problem is some small changes in the jsonReader. It can be for example

jsonReader: {
    root: 'ipInfo.ipResponses',
    id: 'startIP',
    repeatitems: false,
    page:  function(obj) { return 1; },
    total: function(obj) { return 1; },
    records: function(obj) { return obj.ipInfo.ipResponses.length; },
}

The same jqGrid with some cosmetic changes you can see live under http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm.

Comments

[RC.]

Fantastic! I knew I had to be close. Thank you very much.

[RC.]

I have one more question. I have another object in the ipInfo object with similar data, but it is not within an array. Basically it would be a single object (call it newObj: {x:10, y:10}) within each ipInfo object for which I will have many ipInfo objects returned.

[RC.]

Ahhh...no worries I figured it out. It apparently has to be an array, so I changed the root to root: function(obj) { return [obj.ipInfo.newObj]; } it worked. Thanks again for your help.

[Oleg]

@RC: In general it is better if you produce on the server side JSON data specially for jqGrid. If it is not possible one can do in the most cases decoding of data with respect of jsonReader. If you post exact example of your JSON data, the colModel and explain in which column you want place which information I could suggest you the corresponding solution. To have more place (for both question and the answer) it's probably easier to do this in a new question.

[RC.]

Yes, I probably should format this within the controller of my application to be returned to the grid. I'll give it a whirl and if I have further issues I'll post a new question and post a comment here so you'll have a crack at it. Thanks again.

[Oleg]

@RC: You welcome! Think also about making your data more compact. See stackoverflow.com/questions/3054463/… as an example. Moreover some other tricks like converting boolean to 0 or 1 instead of true and false and other you can find under stackoverflow.com/questions/2999955/…. In general compact data means mostly better performance.