JQgrid: not rendering table correctly from JSON data

Question

I have the following JSON data service and I trying to generate a grid using JQgrid. fro some reason when i use the JSON data. it doesnt not render anything

How can i fix this so that jqgrid renders the tablegrid from the JSON data?

Here is my fiddle

MY JQGrid

  $("#output").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
          json: JSON.stringify(jsonData)
    },
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'fdicCertificateNumber',
        width: 65,
          formatter: "showlink",
          formatoptions: {
              baseLinkUrl: "http://www.cnn.com",
              idName: "",
              addParam: function (options) {
                  return {
                      fdicCertificateNumber: options.rowData.fdicCertificateNumber,
                      bName:options.rowData.bName
                  };
              }
          }
      }, {
        name: 'bName',
        width: 165
      }, {
        name: 'address',
        align: 'right',
        width: 85

      }, {
        name: 'state',
        label: 'Share Price',
        align: 'right',
        width: 100,

      },
      /*{ label: 'Value1', 
                  name: 'Value1', 
                  width: 80, 
                  sorttype: 'number', 
                  formatter: 'number',
                  align: 'right'
              }, */
      {
        name: 'lastModifiedDateTime',
        label: 'Total Value',
        width: 160,

      }, {
        name: 'regulatorFull',
        label: 'LTV Ratio',
        width: 70,
        sorttype: 'number',
        align: "right",

      }, {
        name: 'bankHoldingCompany',
        label: 'bankHoldingCompany',
        classes: "hidden-xs", labelClasses: "hidden-xs",
        width: 120,
        width: 165
      },

      {
        name: 'charterClassFull',
        label: 'MaxLoanAmount',
        width: 165,
        sorttype: 'number',

      }

    ],
    additionalProperties: ["Num1"],
    /*beforeProcessing: function (data) {
        var item, i, n = data.length;
        for (i = 0; i < n; i++) {
            item = data[i];
            item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
            item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
            item.Value = parseFloat($.trim(item.Value).replace(",", ""));
            item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
            item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
        }
    }, */
    iconSet: "fontAwesome",
    loadonce: true,
    rownumbers: true,
    cmTemplate: {
      autoResizable: true,
      editable: true
    },
    autoResizing: {
      compact: true
    },
    autowidth: true,
    height: 'auto',
    forceClientSorting: true,
    sortname: "Symbol",
    footerrow: true,
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",


    loadComplete: function() {
      var $self = $(this),
        sum = $self.jqGrid("getCol", "Price", false, "sum"),
        sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
      //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
      $self.jqGrid("footerData", "set", {
        LTVCategory: "Max Approved Loan Amount:",
        Price: sum,
        MaxLoanAmt: sum1
      });
    }
  });

  $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});


    $(window).on("resize", function () {
        var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
        $("#output").jqGrid("setGridWidth", newWidth, true);
    });

JSON

[
  {
    "rank": {
      "fdicCertificateNumber": 3510,
      "bName": "rank , National Association",
      "bFullName": "rank , National Association",
      "address": "100 NORTH TRYON ST",
      "city": "CHARLOTTE",
      "state": "NC",
      "zip": "28202",
      "lastModifiedDateTime": "Oct 20, 2016",
      "regulatorShort": "OCC",
      "regulatorFull": "Office of the Comps",
      "assetConcentration": "All Other > $1 Billion",
      "charterClassShort": "N",
      "charterClassFull": "National rank,  Member",
      "timePeriod": "201606",
      "bankHoldingCompany": "rank CORPORATION",
      "nameQtr": "2016 Q2",
      "status": "Active"
    },
    "Analytics": {
      "fdicCertificateNumber": 3510
    },
    "metricsList": []
  },
  {
    "rank": {
      "fdicCertificateNumber": 3511,
      "bName": "rank, National Association",
      "bFullName": " rank, National Association",
      "address": "10 N. PHILLIPS AVENUE",
      "city": "SIOUX FALLS",
      "state": "SD",
      "zip": "57104",
      "lastModifiedDateTime": "Oct 20, 2016",
      "regulatorShort": "OCC",
      "regulatorFull": "Office of the Electric company",
      "assetConcentration": "All Other > $1 Billion",
      "charterClassShort": "N",
      "charterClassFull": "National rank,  Member",
      "timePeriod": "201606",
      "bankHoldingCompany": "WELLS FARGO & COMPANY",
      "nameQtr": "2016 Q2",
      "status": "Active"
    },
    "Analytics": {
      "fdicCertificateNumber": 3511
    },
    "metricsList": []
  },
  {
    "rank": {
      "fdicCertificateNumber": 14028,
      "bName": "First Guaranty rank",
      "bFullName": "First Guaranty rank",
      "address": "400 GUARANTY SQUARE",
      "city": "HAMMOND",
      "state": "LA",
      "zip": "70401",
      "lastModifiedDateTime": "Oct 20, 2016",
      "regulatorShort": "IC",
      "regulatorFull": " Corporation",
      "assetConcentration": "Commercial a Specialization",
      "charterClassShort": "NM",
      "charterClassFull": "State rank,  Non-Member",
      "timePeriod": "201606",
      "bankHoldingCompany": "FIRST GUARANTY BANCSHARES, INC.",
      "nameQtr": "2016 Q2",
      "status": "Active"
    },
    "Analytics": {
      "fdicCertificateNumber": 14028
    },
    "metricsList": []
  },

  {
    "rank": {
      "fdicCertificateNumber": 58564,
      "bName": " rank",
      "bFullName": " rank",
      "address": "260E RXR PLAZA",
      "city": "UNIONDALE",
      "state": "NY",
      "zip": "11556",
      "lastModifiedDateTime": "Oct 20, 2016",
      "regulatorShort": "IC",
      "regulatorFull": " Corporation",
      "assetConcentration": "Commercial Specialization",
      "charterClassShort": "NM",
      "charterClassFull": "State rank,  Non-Member",
      "timePeriod": "201606",
      "bankHoldingCompany": "  CORPORATION",
      "nameQtr": "2016 Q2",
      "status": "Active"
    },
    "Analytics": {
      "fdicCertificateNumber": 58564
    },
    "metricsList": []
  }
]

Answer 1

The JSON data, which you included in the question, are correct, but the data from JSFiddle demo are wrong because you placed unneeded {} over the array. After fixing the input data you can use jsonmap property for example: http://jsfiddle.net/OlegKi/615qovew/98/ to parse input data correctly or to use jsonReader: { cell: "rank" } alternatively: see http://jsfiddle.net/OlegKi/615qovew/100/.