jqgrid not getting populated with data

Question

I am trying to get a jqgrid populated with JSON data returned from the server.

Below is my jqgrid configuration code -

$(document).ready(function(){
	jQuery("#list4").jqGrid({
		jsonReader : {
		     repeatitems: false,
		     id: "0"
		},
	   	url:'/data/scans',
	   	datatype:'json',
	   	colNames:['Scan ID','Scanned Machine', 'Begin Time', 'End Time'],
	   	colModel:[
	   		{name:'scanId',index:'scanId', width:100, jsonmap:"scanId"},
	   		{name:'scannedMachine',index:'scannedMachine', width:150, jsonmap:"scannedMachine"},
	   		{name:'beginTime',index:'beginTime', width:180,jsonmap:"beginTime"},
	   		{name:'endTime',index:'endTime', width:180,jsonmap:"scanId"}		 
	   	],
	   	rowNum:10,
	   	rowList:[10,20,30],
	   	pager: '#pager4',
	   	sortname: 'scanId',
	    viewrecords: true,
	    sortorder: "desc",
	    caption:"JSON Example"
	});
	jQuery("#list4").jqGrid('navGrid','#pager4',{edit:false,add:false,del:false});

The JSON data returned from server looks like this -

{ total: '1',
page: '1',
records: '2',
rows:[
{scanId:"123", scannedMachine:"Axbhad", beginTime:"Fri Apr 13 13:02:52 IST 2018", endTime:"Fri Apr 13 13:02:52 IST 2018"},
{scanId:"123", scannedMachine:"Axbhad", beginTime:"Fri Apr 13 13:02:52 IST 2018", endTime:"Fri Apr 13 13:02:52 IST 2018"}]}

but the html page is always displaying an empty grid like this -

Can someone please point out what is it that I am not doing correct.

Answer 1

I have got it working. All I did is correctly punctuated the JSON string. Now it looks like this -

{ "total": "1", "page": "1", "records": "2", "rows":[ {"scanId":"123", "scannedMachine":"Axbhad", "beginTime":"Fri Apr 13 17:17:30 IST 2018", "endTime":"Fri Apr 13 17:17:30 IST 2018"}, {"scanId":"124", "scannedMachine":"Axbhad", "beginTime":"Fri Apr 13 17:17:30 IST 2018", "endTime":"Fri Apr 13 17:17:30 IST 2018"}]}.

To avoid making such silly mistake, I have used GSON libabry as below -

@Override
public String toString() {
    return new Gson().toJson(this);
}