How Can I Bind the Roles Array into the view to display the data

Question

The below is is the method to display the team member grid.

 function CreateRecruiterGrid() {
    var searchKeyWord = $("#txtAdKeyWords").val();
    var foreName = $("#txtForeName").val();
    var surName = $("#txtSurname").val();
    var email = $("#txtEmail").val();
    var orgId = $("#ddlRoles").val();
    var vUrl = '@Url.Action("List","Team")';
    var vColumnHeaderNames = ["RecruiterId", "EmailVerified", "FORE NAME", "SUR NAME", "EMAIL", "ROLES", "ACTIONS"];
    jQuery(function ($) {
        var gridSelector = "#grid-table";
        var pagerSelector = "#grid-pager";
        jQuery(gridSelector).jqGrid({
            url: vUrl,
            datatype: 'json',
            type: 'GET',
            height: "auto",
            colNames: vColumnHeaderNames,
            colModel: [
                { name: 'RecruiterId', index: 'RecruiterId', key: true, hidden: true },
                { name: 'EmailVerified', index: 'EmailVerified', hidden: true },
                { name: 'Forename', index: 'Forename', width: 180, align: "left" },
                { name: 'Surname', index: 'Surname', width: 200, align: "left" },
                { name: 'Email', index: 'Email', width: 200, align: "left" },
                { name: 'Role', index: 'Role', width: 200, align: "center" },
                { name: 'Action', index: 'Action', width: 140, align: 'center', editable: false, sortable: false, search: false }
            ],
            viewrecords: true,
            viewpages: true,
            gridComplete: function () {
                var ids = $('#grid-table').jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var recId = ids[i];
                    var rowData = $('#grid-table').jqGrid('getRowData', recId);
                    var rowHtml = "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'>";
                    rowHtml += "<a onclick='deleteTeamMember(" + recId + ")' style='cursor:pointer;'>Delete</a>";
                    $('#grid-table').jqGrid('setRowData', ids[i], { Action: rowHtml });
                };
            },
            jsonReader: {
                root: 'RecruiterData',
                id: 'RecruiterId',
                records: 'Records',
                rows: 'PageSize',
                page: 'PageIndex',
                total: 'TotalPages',
                repeatitems: false
            },
            rowNum: 100,
            rowList: [2, 10, 50, 100],
            pager: pagerSelector,
            altRows: true,
            multiselect: true,
            multiboxonly: true,
            loadonce: false,
            beforeRequest: function () {
                var p = this.p, pd = p.postData;
                p.url = '@Url.Action("List", "XpressJobsTeam")'
                    + '?pageNumber=' + pd.page
                    + '&recordsPerPage=' + pd.rows
                    + '&keyWord=' + searchKeyWord
                    + '&sortVal='
                    + '&forename=' + foreName
                    + '&surname=' + surName
                    + '&email=' + email
                    + '&orgId=' + orgId;
                p.postData = {};
                $("#load_grid-table").text("Retrieving Team Members...");
            },
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    styleCheckbox(table);
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
                $("#recruiterGridContainer div").each(function () {
                    if (!$(this).hasClass("ui-pg-div") && !$(this).hasClass("loading")) {
                        if ($(this).hasClass("ui-jqgrid-hbox")) {
                            $(this).attr('style', 'width:100%;padding-right:0;');
                        }
                        else {
                            $(this).attr('style', 'width:100%;');
                        }
                    }
                });
                $("#recruiterGridContainer table").each(function () {
                    if (!$(this).hasClass("navtable")) {
                        if ($(this).hasClass("ui-pg-table")) {
                            $("#grid-pager_left").attr('style', 'width:35%');
                            $(this).attr('style', 'width:100%;margin-top:5px;');
                        } else {
                            $(this).attr('style', 'width:100%');
                        }
                    }
                });
            },
            caption: "team Members",
            autowidth: true
        });

Currently the grid is visible as below.

The details of the roles of each person is receiving to the controller in my implemented method.But its not displayed in the grid.The Roles are received as an array.(As one member can have one or more roles).

As I understand the issue is with data binding.I want to know how can I bind the roles array in the Jquery method above. I have tried several ways but no success.

I am new to Jquery and any help is appreciated.

---UPDATED---

What I have tried.

changed the line as

{ name: 'Role', index: 'Role', width: 200, align: "left", formatter: roleFormatter },

and implemented function is as below.

   function roleFormatter(cellvalue, options, rowObject) {
        let selectedRoles = "";
        for (var role in cellvalue)
        {
            selectedRoles += role.RecruiterRole;
        }
        return selectedRoles;
    }