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"}
        ]
    }
}

Answer 1

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.