I am trying to return multiple "roles" to a DataTable. Every single role has a specific "title" and "class", which then is returned to the datatable column.

var $role_number = full['roles'];
var $roles = {
    1: { title: 'WorkShop Leader', class: 'badge-light-primary' },
    2: { title: 'Planner', class: 'badge-light-secondary' },
    3: { title: 'Operator', class: 'badge-light-warning' },
};

These are the roles available. And then I return this:

return (
    '<span class="badge rounded-pill ' + $roles[$role_number].class + '">' + 
    $roles[$role_number].title + '</span>'
);

This works if the JSON Object has only one role (for example, role 1: WorkShop Leader). But I want "roles" to be an array, because one user can have more than one role.

So this user has only one role:

{
    "id": 1,
    "first_name": "Albert",
    "second_name": "Cognoms",
    "roles": [1],
    "status": 1
}

And it works properly:

But this user has two roles, and it doesn't show both badges:

{
    "id": 1,
    "first_name": "Albert",
    "second_name": "Cognoms",
    "roles": [1, 2],
    "status": 1
}

If someone knows a better way to display role badges using an array, I would really appreciate the help. I know the solution must be something easy, but I can't get my mind clear on this.

Thanks in advance!