Laravel table is showing unique id multiple times - php

Question

In my laravel project am taking data from multiple tables and showing it in view.
I have uploaded the picture of current output.
I have multiple services in one location id, but I want to show only one location id and their corresponding services in right side.
Following is my code in controller
public function showClinicLocations($id)
{
$clinic = Clinic::find($id);
$locations = Location::where('clinicID', $id)->get();
$locationservices = Service::select('services.serviceName as servicename','locations.locationID as locid')
->join('location_services', 'location_services.serviceID', '=', 'services.serviceID')
->join('locations', 'locations.locationID', '=', 'location_services.locationID')
->join('clinics', 'clinics.clinicID', '=', 'locations.clinicID')
->where('clinics.clinicID','=',$id)
->get();
return view('clinic.locations')->with(['locations' => $locations ,'clinic'=>$clinic , 'services'=> $locationservices]);
}
Following is the code in view page
<table>
<thead>
<tr>
<th>Location Name</th>
<th>Services</th>
</tr>
</thead>
<tbody>
#foreach($services as $service)
<tr>
<td>{!! $service->locid !!}</td>
<td>{!! $service->servicename !!}</td>
</tr>
#endforeach
</tbody>
</table>
I want to show only one unique locid and their services in one row, why am not getting like that
And my expected output is in given image

Answer 1

Currently you are retrieving from database as the output you show, you can achieve what you want by just changing your blade template like this:
<tbody>
#foreach($locations as $location)
<tr>
<?php
$first = true;
foreach($services as $service){
echo('<tr>')
if($service->locid == $location->locationID ){
if($first){
echo('<td class="first">' . $location->locationID . '</td>')
$first=false;
}
else{
echo('<td class="second"></td>')
}
echo('<td>'.$service->servicename.'</td>')
echo('<td><button id="btn_'.$service->serviceID.'">Delete</button></td>')
}
echo('</tr>')
}
?>
</td>
</tr>
#endforeach
</tbody>
To erase the lines, you'll have to add some CSS:
.first{
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
.second{
border-right: 1px solid black;
border-left: 1px solid black;
}
I hope this helps you.

Answer 2

As of now your query result will be separated because you didn't group them.
Here's example
$locationservices = Service::select(DB::raw("GROUP_CONCAT(services.serviceName SEPERATOR ',') as servicename, locations.locationID as locid")
->join('location_services', 'location_services.serviceID', '=', 'services.serviceID')
->join('locations', 'locations.locationID', '=', 'location_services.locationID')
->join('clinics', 'clinics.clinicID', '=', 'locations.clinicID')
->where('clinics.clinicID','=',$id)
->groupBy('locations.locationID')
->get();
If group by has an error just add the servicename
->groupBy('locations.locationID', 'services.serviceName')
then the view is just the same.
You can change the seperator anything you want.
Hope it helps.