Unable to load SharePoint list item REST API response in JqGrid

Question

I am working on a WebPart page that utilizes jQuery and I am planning to incorporate jqGrid into the page also. The page will load the all list item in grid.i got response of ajax but the data will not shown in grid it will dispaly a message "No records view"

jQuery("#list2").jqGrid({

    url:"https://xyz.sharepoint.com/sites/Live/_vti_bin/ListData.svc/Region",
    datatype: "json",
    type: "GET",
    contentType: 'application/json;odata=verbose',
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
    colNames:["Country", "State", "City"],
    colModel:[
        {name:'Country',index:'Country', width:55},
        {name:'State',index:'State', width:90},
        {name:'City',index:'City', width:90}

    ],jsonReader : {
   records: "__metadata",
   cell: "",
   repeatitems: false
},
    rowNum: 3,
    gridview: true,
    pager: '#pager2',
    autoencode: true,
    viewrecords: true,
    height: "auto",
    ignoreCase: true,
    hidegrid: false
});
</Script>

This is the Json i obtained,

{
"d" : {
"results": [
{
"__metadata": {
"uri": "https://xyz.sharepoint.com/sites/Live/_vti_bin/ListData.svc/Region(1)", "etag": "W/\"1\"", "type": "Microsoft.SharePoint.DataService.RegionItem"

}, "ContentTypeID": "0x010071297C85CCC1654A942D938B605256CA", "Country": "Australia", "State": "New South Wales", "City": "Abbotsford", "Id": 1, "ContentType": "Item", "Modified": "\/Date(1397547577000)\/", "Created": "\/Date(1397547577000)\/", "CreatedBy": {
"__deferred": {
"uri": "https://xyz.sharepoint.com/sites/Live/_vti_bin/ListData.svc/Region(1)/CreatedBy"
}
}, "CreatedById": 9, "ModifiedBy": {
"__deferred": {
"uri": "https://xyz.sharepoint.com/sites/Live/_vti_bin/ListData.svc/Region(1)/ModifiedBy"
}
}, "ModifiedById": 9, "Owshiddenversion": 1, "Version": "1.0", "Attachments": {
"__deferred": {
"uri": "https://xyz.sharepoint.com/sites/Live/_vti_bin/ListData.svc/Region(1)/Attachments"
}
}, "Path": "/sites/live/Lists/Region"
},.....

Let me know what i doing wrong. Any help would be highly appreciated. Thanks.

Answer 1

I am answering my own question here in case someone runs across something similar. This was an ajax call to a MS SharePoint site returning list data in JSON.Only one thing is missing in this in jsonReader have to specify "d.result" instead of "_metadata".So the finally complete java script look like this.

 jQuery("#list2").jqGrid({

    url:"https://xyz.sharepoint.com/sites/Live/_vti_bin/ListData.svc/Region",
    datatype: "json",
    type: "GET",
    contentType: 'application/json;odata=verbose',
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
    colNames:["Country", "State", "City"],
    colModel:[
        {name:'Country',index:'Country', width:55},
        {name:'State',index:'State', width:90},
        {name:'City',index:'City', width:90}

    ],
jsonReader : {
   records: "d.results",
   cell: "",
   repeatitems: false
},
    rowNum: 3,
    gridview: true,
    pager: '#pager2',
    autoencode: true,
    viewrecords: true,
    height: "auto",
    ignoreCase: true,
    hidegrid: false
});
</Script>

Now,this works fine,List data successfully load in jqGrid.