json data not displayed in jqgrid

Question

I am creating jqgrid but the area where the json load shows undefined.

I am not able to figure out why data is displayed as undefined. Below is my code:

$(document).ready(function(){
    $.ajax({
        type : "POST",
        url : "../ShowUploadedCSVFile",
        success : function(response) {
            showJQgrid(response);
        },
        error : function() {
            alert("Failure");
        }
    });
    function showJQgrid(Data)
    {
        $("#showCSVList").jqGrid("clearGridData");
        var grid = $('#showCSVList');
        if (grid[0].grid == undefined) 
        {
        } 
        else 
        {
            delete grid;
            $('#showCSVList').GridUnload('#showCSVList');
        }
        var parse = Data;
        global = parse;
        var Jsj = eval('(' + parse + ')');
        var colNames = new Array();
        var colModel = new Array();
        var j = 0;
        for ( var i = 0; i < Jsj.Header.length; i++) 
        {
            colNames.push(Jsj.Header[i]);
            colModel.push({
                name : Jsj.Header[i],
                index : Jsj.Header[i],
                width : '75%',
                align : 'left',
                editable : true
            });
        }
        $('#showCSVList').jqGrid({
            datatype : 'local',
            colNames : colNames,
            colModel : colModel,
            scrollOffset : 0,
            pager : '#showCSVPager',
            rowNum : 5,
            loadonce : true,
            multiselect : true,
            rowList : [ 5, 10, 20, 50 ],
            viewrecords : true

        });
        for ( var i = 0; i < Jsj.data.length; i++) 
        {
            jQuery("#showCSVList").jqGrid('addRowData', i+1, Jsj.data[i]);
        }
        $("#showCSVList").jqGrid('setGridHeight', $("#center").height());
        $("#showCSVList").navGrid("#showCSVPager", {
            edit : false,
            add : false,
            del : true
        });
        $("#showCSVList").jqGrid('inlineNav', "#showCSVPager");
    }
}); 

My Json File is:

{
    "Header": ["Name", "Party", "Province", "Age", "Gender"],
    "data": [{
        "Name": "Mourani, Maria",
        "Age": "43",
        "Gender": "Female",
        "Party": "BlocQuebecois",
        "Province": "Quebec"
    }, {
        "Name": "Sellah,Djaouida",
        "Age": "30",
        "Gender": "Female",
        "Party": "NDP",
        "Province": "Quebec"
    }, {
        "Name": "St-Denis,Lise",
        "Age": "72",
        "Gender": "Female",
        "Party": "NDP",
        "Province": "Quebec"
    }]
}

The output generated by this:

Answer 1

The issue is with the following lines;

var parse = Data;
global = parse;
var Jsj = eval('(' + parse + ')');

Since you are working with json data you don't need to eval it, and if you are passing in a string you should be using JSON.parse() anyway. Change the above to:

var Jsj = Data;

There are some other issues around the footer display being incorrect, unfortunately I haven't used jqGrid before (I prefer datatables.net plugin). I would also suggest you stay away from variables names like parse, whilst strictly it is not a reserved word it is confusing

jsFiddle Demo