You will need to configure jsonmap in colModel. See docsumentation and online demo. we have such examples.

Regards

{"success":true,"message":[null],"page":0,"total":0,"records":0,"rows":[ {"userid":8,"username":"XYZ","userdetails":{"detailid":84,"city":"SDFE","state":"OPUY"}}, {"userid":9,"username":"ABCD","userdetails":{"detailid":85,"city":"QWSDF","state":"PLKJH"}} }

I want to display Username,City,State from the JSON data. It only shows the usename field, other fields are not able to display as userdetails is nested JSON object.

My JQgrid Model is as follows.

  jq("#grid").jqGrid({
      url:'${pageContext.servletContext.contextPath}/grid/load.action',
   datatype: 'json',
   mtype: 'GET',
      colNames:['Id', 'User Name', 'City','State'],
      colModel:[
       {name:'userid',index:'userid', width:55,editable:true,editoptions:{readonly:false,size:10},hidden:true},
       {name:'username',index:'username', width:100,editable:true,edittype:'text',
           editoptions: {
                dataInit: function (elem) {
                    myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");

                }

       }},
       {name:'city',index:'city', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
           {name:'state',index:'state', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
      ],
      postData: {
   },
   rowNum:20,
      rowList:[20,40,60],
      height: 200,
      autowidth: true,
   rownumbers: true,
      pager: '#pager',
      sortname: 'id',
      viewrecords: true,
      sortorder: "asc",
      caption:"Users",
      emptyrecords: "Empty records",
      loadonce: false,
      editurl:'${pageContext.servletContext.contextPath}/grid/edit.action',
      loadError : function(xhr,st,err) { 
          console.log('display error : '+err);  
          jq("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);

      },
      loadComplete: function() {
   },
      jsonReader : {
          root: "rows",
          page: "page",
          total: "total",
          records: "records",
          repeatitems: false,
          cell: "cell",
          id: "id"
      }
  });
  jq("#grid").jqGrid('navGrid','#pager',
    {edit:true,add:true,del:false,search:false},
    { },
          { },
          { },
    {
        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
           closeOnEscape: true,
            multipleSearch: true,
             closeAfterSearch: true }
  );

 });

Please suggest me the solution for how to load json data when it has nested object in it.