Not able to bind data to JQGrid with JSON when calling webapi

Question

Data is not getting displayed in the grid. How do I map cells.value to each column?

Json output:

[
    {"UserName":"8125579231","RoleId":1,"Name":"Sreekanth","RoleName":"Administrator"},
    {"UserName":"9676078986","RoleId":1,"Name":"Karteek","RoleName":"Administrator"},
    {"UserName":"9703804807","RoleId":1,"Name":"Kiran","RoleName":"Administrator"},    
    {"UserName":"9177458358","RoleId":1,"Name":"Venkat","RoleName":"Administrator"},
    {"UserName":"7760699118","RoleId":2,"Name":"RAM","RoleName":"Sales"}
]

Code:

 $j('#list2').jqGrid({
            caption: "Employee Details",
            url: "http://localhost:9611/api/Master/GetBackendUsersList",
            data: "{}",
            datatype: "json",
            //contentType: "application/json; charset-utf-8",
            mtype: "GET",
            colNames: ["UserName", "RoleId", "Name", "RoleName"],
            colModel: [
                  { name: "UserName", index: 'UserName', width: 150 },
                  { name: 'RoleId', index: "RoleId", width: 150 },
                  { name: "Name", index: "Name", width: 150 },
                  { name: "RoleName", index: "RoleName", width: 150 }
            ],
            rowNum: 10,
            loadonce:true,
            //rowList: [10, 20, 30],
            //pager: '#jQGridDemoPager',
            sortname: "UserName",
            viewrecords: true,
            sortorder: "desc",
});

Answer 1

I have updated few things in your code based on json data, now which looks good.

var $j = $.noConflict(true);

//Updated with format how you're getting from web service.
var mydata = [
  {"UserName":"asda","RoleId":1,"Name":"Sreekanth","RoleName":"Administrator"},
    {"UserName":"sa","RoleId":1,"Name":"Karteek","RoleName":"Administrator"},
    {"UserName":"asda","RoleId":1,"Name":"Kiran","RoleName":"Administrator"},    
    {"UserName":"asda","RoleId":1,"Name":"Venkat","RoleName":"Administrator"},
    {"UserName":"asdas","RoleId":2,"Name":"RAM","RoleName":"Sales"}
];
 //Updated with no conflict variable
 $j('#list2').jqGrid({
        caption: "Employee Details",
        data: mydata, // Given local data
        datatype: "local", // Changed to local sice loading local data.
        colNames: ["UserName", "RoleId", "Name", "RoleName"],
        colModel: [
              { name: "UserName", index: 'UserName', width: 150 },
              { name: 'RoleId', index: "RoleId", width: 150 },
              { name: "Name", index: "Name", width: 150 },
              { name: "RoleName", index: "RoleName", width: 150 }
        ],
        rowNum: 10,
        pager: '#jQGridDemoPager',
        sortname: "UserName",
        viewrecords: true,
        sortorder: "desc",
 });

Here is HTML part,

<table id="list2">
   <tr>
       <td />
   </tr>
</table>
<div id="jQGridDemoPager"></div>

See the Demo.