Show data in "bootstrap-table", from the data received from the controller

Question

From the controller in Laravel I send the data to the view in this way

public static function index(): Factory|View
    {
        $products = Products::where('visible',true)->get();
        return view('products.list',compact('products'));
    }

In the blade view I previously used data-url to receive the information from an endpoint, but I want to show the data received from the controller that will be in $products

@extends('layout')

@section('content')

    <div id="list-test">

        <table
            id="tabla-listado-productos"
            data-locale="es-ES"
            data-toggle="table"
            data-pagination="true"
            data-search="true"
            data-filter-control="true"
            data-show-search-clear-button="true"
            data-mobile-responsive="true">
            <thead>
            <tr>
                <th data-field="id">id</th>
                <th data-field="name" data-sortable="true">name</th>
              </tr>
            </thead>
        </table>


    </div>
@endsection

@section('script')

    <script type="text/javascript">

        $(document).ready(function() {
            var productos = @json($productos);

            console.log(productos);

            $('#tabla-listado-productos').bootstrapTable({
                data: productos,
            });
        });
        

    </script>

@endsection

If I do a console.log of $products in the blade view I see the data.

0:{id: 1, name: 'car test number 1', …}
1:{id: 2, name: 'car number 2', …}
length:2\[\[Prototype\]\]:Array(0)

search information in mutiple sites

Answer 1

You've defined the variable as $products in your controller, but you're trying to access it as productos in your Blade view. Make sure the variable names match.