jqgrid table showing blank

Question

The jqgrid is showing a black table even though it shows the number of records correctly, i'm using a webservice which returns json string i can see the data which it has returned from the ajax call but it is not displayed in the table,the json data which i get from webservice is:

Json:
 [{"profile_id":"413a75c9-03b4-4660-841b-2d213a2e2b95", "id":"313","first_name":"abc", "email":"abc@gmail.com"} , {"profile_id":"498fa726-0a34-4bbd-baab-6b4f2eb13bcf" , "id":"308" , "first_name":"xyz" , "email":"xyz@gmail.com"}]

    $.ajax({
            url:'rest/WebService/Getdata',
            dataType:'json', 
            success: function (data_response) {
                jqgrid(JSON.stringify(data_response));
            },
            error: function (error) {
                alert("error");
                alert(JSON.stringify(error));
            }
            });

    function jqgrid(jsondata){
        $("#list3").jqGrid({
        datatype:"jsonstring",
        datastr:jsondata,
        colNames:['Profile_id','id', 'Name', 'Email'],
        colModel:[
            {name:'Profile_id',index:'profile_id', width:500},
            {name:'id',index:'id', width:250},
            {name:'Name',index:'first_name', width:300},
            {name:'Email',index:'email', width:240} 
        ],
        jsonReader: {
            id: "1",
            cell: "",
            root: "root",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },      
        emptyrecords: "Nothing to display",
        rowNum:10,
        rowList:[10,20,30],
        pager: $('#pager3'),
        viewrecords: true,
        sortorder: "desc",
        caption: "Data table"
    });
    }

Answer 1

Input JSON data which you use

{
    [
        {
            "profile_id": "413a75c9-03b4-4660-841b-2d213a2e2b95",
            "id": "313",
            "first_name": "abc",
            "email": "abc@gmail.com"
        },
        {
            "user_profile_id": "498fa726-0a34-4bbd-baab-6b4f2eb13bcf",
            "id": "308",
            "first_name": "xyz",
            "email": "xyz@gmail.com"
        }
    ]
}

are wrong. You should fix it to this one for example by usage array as the answer

[
    {
        "profile_id": "413a75c9-03b4-4660-841b-2d213a2e2b95",
        "id": "313",
        "first_name": "abc",
        "email": "abc@gmail.com"
    },
    {
        "user_profile_id": "498fa726-0a34-4bbd-baab-6b4f2eb13bcf",
        "id": "308",
        "first_name": "xyz",
        "email": "xyz@gmail.com"
    }
]

or something like

{
    "result": [
        {
            "profile_id": "413a75c9-03b4-4660-841b-2d213a2e2b95",
            "id": "313",
            "first_name": "abc",
            "email": "abc@gmail.com"
        },
        {
            "user_profile_id": "498fa726-0a34-4bbd-baab-6b4f2eb13bcf",
            "id": "308",
            "first_name": "xyz",
            "email": "xyz@gmail.com"
        }
    ]
}

I strictly recommend you to use datatype: "json" instead of usage $.ajax manually.

If you use current version of jqGrid (4.5.2) than you can just remove jsonReader. You current jsonReader is wrong at least because of usage id: "1". I recommend you additionally replace pager: $('#pager3') to pager: '#pager3' and add gridview: true, autoencode: true, height: "auto" options.