<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/treegrid/1.0.0/css/jquery.treegrid.min.css">

<style>
    body {
    font-family: 'Work Sans' !important;
    line-height: 1.2 !important;
}

</style>

    <section class="page-title mb-3">
        <div class="container position-relative">
            <div class="row">
                <div class="col-md-6">
                    <h1>Bots</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/bots">Bots</a></li>
                            <li class="breadcrumb-item active" aria-current="page">List</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6">
                    <div class="upgrade-bl">
                        @if (auth()->user()->credits)
                        <div class="sub-level card-body">Free Trades: <b><span translate="no" class="level-type" style="background-color: #38425a!important;padding: 4px 10px;">{{ auth()->user()->credits }}</span></b></div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
   <!--  <bot-table-view
        allowed-bots="{{ AppHelpersHelper::productMeta('trading-pairs') }}"
        all-bots="{{ $allBots }}"
        wallet-balance="{{ AppHelpersHelper::walletBalance() }}"
        websocket-token="{{ $websocket_token }}"
        websocket-url="{{ $websocket_url }}"
        bot-category="{{ json_encode($botCategory) }}"
    ></bot-table-view> -->
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                    <table id="botTable" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Exchange</th>
            <th>Base Currency</th>
            <th>Quote Currency</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($treeData as $exchange => $baseCurrencies)
            <tr class="treegrid-{{ $exchange }}">
                <td>{{ $exchange }}</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            @foreach ($baseCurrencies as $baseCurrency => $quoteCurrencies)
                <tr class="treegrid-{{ $exchange }} treegrid-parent-{{ $exchange }}-{{ $baseCurrency }}">
                    <td>{{ $exchange }}</td>
                    <td>{{ $baseCurrency }}</td>
                    <td></td>
                    <td></td>
                </tr>
                @foreach ($quoteCurrencies as $quoteCurrency)
                    <tr class="treegrid-{{ $exchange }} treegrid-parent-{{ $exchange }}-{{ $baseCurrency }} treegrid-parent-{{ $exchange }}-{{ $baseCurrency }}-{{ $quoteCurrency['id'] }}">
                        <td>{{ $exchange }}</td>
                        <td>{{ $baseCurrency }}</td>
                        <td>{{ $quoteCurrency['quote_currency'] }}</td>
                        <td>{{ $quoteCurrency['name'] }}</td>
                    </tr>
                @endforeach
            @endforeach
        @endforeach
    </tbody>
</table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/treegrid/1.0.0/js/jquery.treegrid.min.js"></script>

<script>
     jQuery.noConflict();

 jQuery(document).ready(function($) {
                var data = @json($treeData);

            $('#botTable').DataTable({
            "paging": false,
            "ordering": false,
            "info": false
        });

       // Initialize DataTables TreeGrid
            $('#botTable').treegrid({
                initialState: 'collapsed', // Optional: Set initial state of tree nodes
                treeColumn: 0,             // Optional: Index of the column containing the tree structure
                expanderExpandedClass: 'glyphicon glyphicon-minus', // Optional: Custom expander icon classes
                expanderCollapsedClass: 'glyphicon glyphicon-plus' // Optional: Custom collapsed icon classes
            });
        });

        
 
</script>

details

not give proper out put and gives error in console… i want tree format of data.please any one help out to solve this error.not give proper out put and gives error in console… i want tree format of data.please any one help out to solve this error.not give proper out put and gives error in console… i want tree format of data.please any one help out to solve this error.