title: jqGrid - Parsing json response
body: <p>I have a jqGrid which sends ajax requests to my server. However, my server sends a json response in a totally different format (I can not change it). Therefore I need to parse the response from my server, so my jqGrid can display the data properly.</p>
  
  <p>If I understood right, I can use <strong>ajaxGridOptions</strong> with <strong>converters</strong>. So, I can capture the response and parse it. It seems to me that converters is working fine and parsing the response properly. However, jqGrid does not understand my parsed response. It displays a message “Loading…” forever (I can see in firebug that the request/response is fine and there are no javascript error in the console).</p>
  
  <p>Can anybody help me with this?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;&lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" /&gt;
  &lt;/head&gt;&lt;body&gt;
  
  &lt;!-- IMPORT JS --&gt;  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"&gt;&lt;/script&gt;    
  
  &lt;script&gt;
  
  $(document).ready(function() {
      var parsedResponse = '{"currentPage" : "1", "totalRecords" : 5, "pageSize" : 3,'
              + '"myData" :[{"id" : "1", "name" : "Name 1" },'
              + '          { "id" : "3", "name" : "Name 3" },'
              + '          { "id" : "2", "name" : "Name 2" }]'
              + '}';
  
      var myGrid = $('&lt;table&gt;').attr( "id", "useraccount-search-datagrid");
      var myPager = $("&lt;div&gt;").attr("id", "useraccount-search-datagrid-pager");
  
      $("body").append(myGrid, myPager);
  
      myGrid.jqGrid({
          pager : myPager,
          // datastr: parsedResponse, // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
          // datatype : "jsonstring", // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
          serializeGridData : function(data) {
              return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"2"}}}';
          },
          ajaxGridOptions: {
              url: "../rush-controller-testing/userAccount/find",
              type: "POST",
              contentType: "application/json; charset=utf-8",         
              dataType: "json",
              converters: { "text json": function (responseText) {
                      // console.log(responseText); // Shows the response string from the cerver
                      return parsedResponse;
                  }
              },
              success: function(data, textStatus, jqXHR ) {
                  // Nice! It shows 'parsedResponse' from 'converters'. Looks good so far.
                  console.log(data); console.log(textStatus); console.log(jqXHR);
              }
          },
          colModel : [
              { name : 'name', index : 'id', width : "500"}
          ],
          jsonReader: {
              root: "myData", page: "currentPage", records: "totalRecords" 
          },
          rowNum : 3,
          viewrecords : true,
          height : "auto",
          ignoreCase : true,
          hidegrid: false
      });
  
  }); 
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>=== UPDATE ===</strong></p>
  
  <p>My server response is something like:</p>
  
  <pre><code>{"UserAccountSearchResult":{
      "userAccounts":[{
          "userAccountId":18,
          "clientAccount":{"clientAccountId":19,"name":"name:5791","firstName":"firstName:5791","lastName":"lastName:5791","active":true},
          "userName":"email@824504.com",
          "password":"password824504",
          "firstName":"firstName824504",
          "lastName":"lastName824504",
          "isActive":true,
          "phoneNumbers":{"phoneNumberId":36,"number":824504824504},
          "addresses":{"addressId":126,"country":"CANADA","provinceOrState":"ONTARIO","address":"address824504","city":"Windsor","postalCode":"postalCode824504"},
          "emails":{"emailId":36,"email":"secondaryEmail@824504.ca"}
          },{
          "userAccountId":44,
          "clientAccount":{"clientAccountId":45,"name":"name:3136","firstName":"firstName:3136","lastName":"lastName:3136","active":true},
          "userName":"email@796312.com",
          "password":"password796312",
          "firstName":"firstName796312",
          "lastName":"lastName796312",
          "isActive":true,
          "phoneNumbers":{"phoneNumberId":88,"number":796312796312},
          "addresses":{"addressId":298,"country":"CANADA","provinceOrState":"ONTARIO","address":"address796312","city":"Greater Sudbury","postalCode":"postalCode796312"},
          "emails":{"emailId":88,"email":"secondaryEmail@796312.ca"}
          }]
      ,"pagination":{"pageSize":10,"pageNumber":2,"totalItems":49}}}
  </code></pre>
  
  <p>So, I already have a function to parse this response to something like below. And I want to use this parsed response with jqGrid because in my application there many cases like that:</p>
  
  <pre><code>{"currentPage" : "1",   "totalRecords" : 2, "pageSize" : 3,
      "myData" :[{
          "id" : "1", "name" : "firstName824504", "email" : "secondaryEmail@824504.ca"
      },{
          "id" : "3", "name" : "firstName796312", "email" : "secondaryEmail@796312.ca"
      }]
  };
  </code></pre>
  
  <p><strong>=== FINAL CODE ===</strong></p>
  
  <p>I got it working. Thanks for the help. Here is my functional example. I hope it can help somebody else in the future.</p>
  
  <pre><code>$(document).ready(function() {
      /*
       * Here I will have a very complex logic to parse the response from the server in something jqGrid can understand.
       * Right now it is just a hard-coded string to make thinks easer to understand
       */ 
      function parseResponse(responseText){
          var parsedResponse = '{"currentPage" : "1", "totalRecords" : 5, "pageSize" : 3, "pageTotal" : 2,'
                  + '"myData" :[{"id" : "1", "name" : "Name 1" },'
                  + '          { "id" : "3", "name" : "Name 3" },'
                  + '          { "id" : "2", "name" : "Name 2" }]'
                  + '}';  
          return JSON.parse(parsedResponse);
      };
  
      var myGrid = $('&lt;table&gt;').attr( "id", "useraccount-search-datagrid");
      var myPager = $("&lt;div&gt;").attr("id", "useraccount-search-datagrid-pager");
  
      $("body").append(myGrid, myPager);
  
      myGrid.jqGrid({
          pager : myPager,
          // datastr: parsedResponse, // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
          datatype : "json",
          url: "../rush-controller-testing/userAccount/find",
          mtype: "POST",
          serializeGridData : function(data) {
              // That is just a hard-coded example to make things easier to understand. Will change it to a more complex logic later.
              return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"3"}}}';
          },
          ajaxGridOptions: {
              contentType: "application/json; charset=utf-8",
          },
          colModel : [
              { name : 'name', index : 'name', width : "500"}
          ],
          jsonReader: {
              repeatitems: false,
              root: function(data){
                  //the actual data
                  var result = parseResponse(data);
                  return result.myData;
              },
              total: function(data) {
                  //total pages for the query
                  var result = parseResponse(data);
                  return result.pageTotal;
              },
              page: function(data){
                  //current page of the query
                  var result = parseResponse(data);
                  return result.currentPage;
              },
              records: function(data){
                  //total number of records for the query
                  var result = parseResponse(data);
                  return result.totalRecords;
              } 
          },
          rowNum : 3,
          viewrecords : true,
          height : "auto",
          ignoreCase : true,
          hidegrid: false
      });
  
  });
  </code></pre>