循环数据库结果似乎只执行一次

I am handling an ajax request and querying my database in my controller.

Controller:

    $prod_id = $request->prod_type;

    $data = types::where('id', $prod_id)->with('products')->get(); 

    return view('pages.types')->with('data',$data);

When $data is returned it shows all products based on the queried type from the database. However when looping through $data in my view it seems to loop only once and displays only one card.

View:

            @foreach($data as $type )
        <div class="col-sm-3 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <h4 class="card-title"><a href="/products/{{$type->products[0]->id}}">{{$type->products[0]->Product_Name}}</a></h4>
                    <p class="card-text">...</p>                        
                 </div>
            </div>
        </div>
        @endforeach

I realise I am only asking for the first object with products[0] but if omitted I get property[id] does not exists in collection instance error.

I think you're looping over the type here, but you actually want to be looping over the products. Try this:

@foreach($data[0]->products as $product )
<div class="col-sm-3 mb-3">
    <div class="card h-100">
        <div class="card-body">
            <h4 class="card-title"><a href="/products/{{$product->id}}">{{$product->Product_Name}}</a></h4>
            <p class="card-text">...</p>                        
         </div>
    </div>
</div>
@endforeach

UPDATE:

Okay, I've updated the code sample so that it will just loop over the first Type object's products - I assume that's what you want as it looks like the Controller is only getting one type anyway?