John Davidson

javascript - Laravel display related users via orgchart.js


I am new to laravel and i barely managed to do up until this point.

I need guidance on putting the data @dump on the organigram.

I really have no idea where to start this. Any direction or idea is appreciated.

There are users who are referred by others, and the actual result shows the hierarchy of the user, who is referred by who. For instance, you can see that user with id 27 has referred 3 other user under him, 35,36, 38, and 36 has referred an additional user with ID 37.

thank you

User Controller

public function viewRelated()
$roles = collect(Role::whereIn('slug', array_merge(Role::FIRST_PARTY_ROLES, Role::SECOND_PARTY_ROLES, ['master']))->get())->keyBy('id')->toArray();
$users = User::whereIn('role', array_keys($roles))
->where('email_verified_at', '<>', null)
->where('account_verified_at', '<>', null)->get();

$users = $this->buildUserHierarchy($users);

return view('dashboard.admin.users.relationships', ['users' => $users]);

protected function buildUserHierarchy($users, $user_id = null, $level = 0)
$users_tree = [];
$parents = collect($users)->where("assigned_to", "==", $user_id)->values();

foreach ($parents as $child) {
$child->users = $this->buildUserHierarchy($users, $child->id, $level + 1);
$item = [
'id' => $child->id,
'name' => $child->name . ' ' . $child->surname,
'email' => $child->email,
'role' => Role::find($child->role)->name,
'users' => $this->buildUserHierarchy($users, $child->id, $level + 1),

$users_tree[$child->id] = $item;
return $users_tree;

Route for Admin

   Route::get('list', 'App\Http\Controllers\Dashboard\UserController@viewRelated')->name('user.list');


<div class="row">


Actual Result

Desired Result using OrgChart Js

My Answer:
> First, you need to fetch the related users data from your database in your controller. Based on the information you provided, it seems like you have a hierarchical relationship between users where one user can refer multiple other users.

> Assuming you have a User model with a `referral_id` column that stores the ID of the user who referred them, you can fetch the related users data like this:

public function viewRelated()
$users = User::all(); // Fetch all users
$relatedUsers = [];

foreach ($users as $user) {
if ($user->referral_id) {
$relatedUsers[$user->referral_id][] = $user;

return view('related-users', compact('relatedUsers'));

> In the above code, we are fetching all users and then creating an array `$relatedUsers` where the key is the ID of the user who referred and the value is an array of users referred by that user.

> Next, in your view file (e.g., `related-users.blade.php`), you can use the `@dump` directive to display the data:

@foreach($relatedUsers as $referralId => $users)

User with ID {{ $referralId }} has referred:

    @foreach($users as $user)
  • User with ID {{ $user->id }}

  • @endforeach


> This will display the hierarchy of users based on who referred whom. You can further enhance this by using a JavaScript library like OrgChart.js to visualize this hierarchy in an organizational chart format.

> You can pass the `$relatedUsers` data to your JavaScript code that initializes the OrgChart.js library and renders the organizational chart based on the hierarchy data.

> I hope this helps you get started with displaying related users in an organizational chart using Laravel and OrgChart.js. Let me know if you need further assistance!

Rate this post

3 of 5 based on 4690 votes


© 2024 - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us