Data Not Visible With jqGrid Datatype JSON

Question

I am trying to bind JSON data with jqGrid, but the grid is empty. Did I made mistake with the code ?

Script:

    <table id="grid"></table>
    <div id="pager"></div>

    <script type="text/javascript">
    var data = '{ "employees" : [' +
                '{ "firstName":"John" , "lastName":"Doe" },' +
                '{ "firstName":"Anna" , "lastName":"Smith" },' +
                '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

      $("#grid").jqGrid({
        datatype: 'json',
        colModel:[
          {name:'firstName', label: 'First name', width: 300},
          {name:'lastName', label: 'Last Name', width: 200}
        ],
        caption: "ReportingEmployees",
        pager : '#pager',
        height: 'auto'
      }).navGrid('#pager', {edit:false,add:false,del:false, search: false});
    </script>

Answer 1

You need to pass json data in following format and not as text, to the jqGrid function and set datatype to local because there is no api / url call.

var myData = [{ "firstName":"John" , "lastName":"Doe" },
                { "firstName":"Anna" , "lastName":"Smith" },
                { "firstName":"Peter" , "lastName":"Jones" }];

      $("#grid").jqGrid({
        data: myData,//pass data here
        datatype: 'local',//set datatype to local
        colModel:[
          {name:'firstName', label: 'First name', width: 300},
          {name:'lastName', label: 'Last Name', width: 200}
        ],
        caption: "ReportingEmployees",
        pager : '#pager',
        height: 'auto'
      }).navGrid('#pager', {edit:false,add:false,del:false, search: false});

JSFiddle Demo

Note: - Please make sure that you have included below js files along with jQuery lib

grid.locale-en.js
jquery.jqGrid.min.js