Showing data Roles Spatie from eloquent relations get error in Laravel - php

Question

i want to showing data from relation of User and Roles Spatie. But i've got error doesn't exist collections. Here is my code :
Model :
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
use Spatie\Permission\Traits\HasRoles;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable, HasRoles;
Controller :
public function index()
{
$data_user = User::with('roles')->get();
return view('role.role', [
'data_user' => $data_user
]);
}
role.blade.php :
<table class="table-hover table">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">User</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
</tr>
</thead>
#foreach ($data_user as $du)
<tbody>
<tr>
<td scope="row">{{ $loop->iteration }}</td>
<td>{{ $du->name }}</td>
<td>{{ $du->email }}</td>
<td>{{ $du->roles->name }}</td>
</tr>
</tbody>
#endforeach
</table>
Error:
Property [name] does not exist on this collection instance.

Answer 1

The roles relation is a collection of roles since the package allows a user to have multiple roles. So you cannot access the property name on the collection.
You need to get an individual role from the collection, for example
{{ optional($du->roles->first())->name }}
Edit
If you wish to show multiple roles, you could implode them
{{ $du->roles->implode('name', ', ') }}
If you wish to make it neater, you could write a loop to generate badges. Here's a simple example using bootstrap
<td>
#foreach($du->roles as $role)
<span class="badge bg-primary">{{ $role->name }}</span>
#endforeach
</td>