Let's walk through practical fixes to get your jqGrid populated with server-side JSON data:

1. Correct the jsonReader Configuration #

Your current jsonReader uses id: "0", which is designed for when repeatitems: true (array-based JSON structures). Since you’ve set repeatitems: false (ideal for object-based JSON), update the id property to match your unique identifier field from the JSON objects—likely scanId:

jsonReader : {
  repeatitems: false,
  id: "scanId", // Match this to your unique JSON field name
  root: "rows"  // Adjust based on your server's response structure
}

If your server returns a raw array of objects (not wrapped in a rows key), modify the root property to return the entire response directly:

jsonReader : {
  repeatitems: false,
  id: "scanId",
  root: function(data) { return data; } // Use this for raw array responses
}

2. Validate Server Response Format #

jqGrid expects a specific structure to parse data correctly. Ensure your server returns valid JSON that aligns with your jsonReader setup:

Example Valid Format (with root: "rows"): #

{
  "rows": [
    {
      "scanId": 1,
      "scannedMachine": "Server01",
      "beginTime": "2024-05-20 09:00",
      "endTime": "2024-05-20 09:30"
    },
    {
      "scanId": 2,
      "scannedMachine": "Server02",
      "beginTime": "2024-05-20 10:00",
      "endTime": "2024-05-20 10:45"
    }
  ]
}

Example Raw Array Format: #

[
  {
    "scanId": 1,
    "scannedMachine": "Server01",
    "beginTime": "2024-05-20 09:00",
    "endTime": "2024-05-20 09:30"
  }
]

3. Complete Your colModel #

Ensure every column in colNames has a corresponding, complete entry in colModel. For your missing beginTime and endTime columns, add:

colModel:[
  {name:'scanId', index:'scanId', width:100},
  {name:'scannedMachine', index:'scannedMachine', width:150},
  {name:'beginTime', index:'beginTime', width:180},
  {name:'endTime', index:'endTime', width:180}
]

Note: You can omit jsonmap if the column name exactly matches the JSON key (which it does here).

4. Debug with Browser Developer Tools #

Open your browser’s dev console (F12) to check for common issues:

• 404 errors: Confirm the url:'/data/scans' path is correct and returns data.
• Invalid JSON: Use the "Network" tab to inspect the server response—validate it with a JSON linter if needed.
• JavaScript syntax errors: Fix any typos or missing brackets in your jqGrid configuration.

5. Add a loadError Callback #

Get detailed feedback on failed data loads by adding this to your jqGrid options:

loadError: function(xhr, status, error) {
  console.log("Data Load Error:", status, error);
  console.log("Server Response:", xhr.responseText);
}

6. Ensure Grid Visibility #

Add a height property to guarantee the grid is visible even before data loads:

height: 'auto', // Or a fixed value like 300

Corrected Full Configuration (for raw array responses): #

$(document).ready(function(){ 
  jQuery("#list4").jqGrid({ 
    jsonReader : { 
      repeatitems: false, 
      id: "scanId",
      root: function(data) { return data; }
    }, 
    url:'/data/scans', 
    datatype:'json', 
    colNames:['Scan ID','Scanned Machine', 'Begin Time', 'End Time'], 
    colModel:[ 
      {name:'scanId', index:'scanId', width:100}, 
      {name:'scannedMachine', index:'scannedMachine', width:150}, 
      {name:'beginTime', index:'beginTime', width:180}, 
      {name:'endTime', index:'endTime', width:180}
    ],
    height: 'auto',
    loadError: function(xhr, status, error) {
      console.log("Load Error:", status, error);
      console.log("Response:", xhr.responseText);
    }
  });
});

Content of the question originates from stack exchange, question author Abhishek