Get Permission Levels Using REST API

I have created a simple code snippet which contains the combination of HTML structure, styles required for styling html structure and main JavaScript code.

HTML DOM

<!-- Style required for HTML Snippet -->
< style type = "text/css" > .tbl - roles th
    {
        background - color: #ddd;
        border: 2 px solid# fff;
        text - align: left
    }.tbl - roles td
    {
        background - color: #eee;
        border: 2 px solid# fff;
    }.web - heading
    {
        padding: 2 px;
    } < /style>
    <!--Include jQuery library to perform dynamic html dom manipulation -->
    < script type = "text/javascript"
src = "/siteassets/scripts/jquery.js" > < /script> < div > < h2 class = "web-heading" > Web Role definitions < /h2> < /div> < table width = "100%"
cellpadding = "10"
cellspacing = "2"
id = "tblRoles"
class = "tbl-roles" > < thead > < tr > < th > Id < /th> < th > Role Name < /th> < th > Description < /th> < /tr> < /thead> < tbody > < /tbody> < /table>
Load

1. Some methods from jQuery is used to generate the result in tabular format.
   
2. Create skeleton of table structure. Header row alone, later with the help of jQuery we will generate other rows.
   
3. CSS lines help to style the table with results.

The permission level refers to the roles that are associated in the SharePoint site, which is used to align the permissions to groups or users to the SharePoint object.

The following REST API endpoint returns the collection of permission levels associated to the SharePoint site.

http://<SharePoint site>/_api/web/roleDefinitions

JS Snippet

<!-- Following script returns the collection of role definitions of a web -->
< script type = "text/javascript" > functiongetRoles()
{
    varsiteurl = _spPageContextInfo.webAbsoluteUrl;
    $.ajax(
    {
        url: siteurl + "/_api/web/roleDefinitions",
        method: "GET",
        headers:
        {
            "Accept": "application/json; odata=verbose"
        },
        success: function(data)
        {
            // Returning the results
            onSucceed(data);
        },
        error: function(data)
        {
            onFailure(data);
        }
    });
}
functiononSucceed(data)
{
    //Collection of role definitions returned as a result
    varroledefs = data.d.results;
    for (i = 0; i < roledefs.length; i++)
    {
        vartrow = "<tr><td>" + roledefs[i].Id + "</td><td>" + roledefs[i].Name + "</td><td>" + roledefs[i].Description + "</td>" + "</tr>";
        //Append each role definition to the table as a row
        $("#tblRolestbody").append(trow);
    }
}
functiononFailure(error)
{
    alert(error);
}
functioninjectMethod()
{
    getRoles();
}
injectMethod(); < /script>

1. By using the jQuery’s $.ajax method, we will send the REST url to the server as a request.
   
2. The success parameter of $.ajax returns the response.
   
3. In the success method, we have written the code to extract the result and populate the returned data in a table.

Add the snippet to the content editor as I mentioned in the article. You can also try the code in SharePoint add-in to get the following result.

Output

The code is tested in SharePoint online and the following screenshot shows the results in tabular format.