Have you done a dd to see or verify results.
And this
@foreach($categories->take(6) as $category)
the take(6) actually works here, I never used like that before.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have a list that shows some categories:
<ul class="Categories__Menu">
@foreach($categories->take(6) as $category)
<li class="active">
<a href="#" name="category" id="{{$category->id}}" href="#">{{$category->name}}</a>
</li>
@endforeach
<li><a data-toggle="modal" data-target=".bd-example-modal-lg" href="">More <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
When a user clicks in a category is done an ajax reqquest to get the conferences that belong to that clicked category. The issue is that for example if a category has more than 1 conference associated when the user clicks in that category it appears in the network tab two equal results:
[{id: 7, name: "Conference test", description: "", start_date: "2018-03-08 06:30:00",…}]
0
:
{id: 7, name: "Conference test", description: "", start_date: "2018-03-08 06:30:00",…}
So in the #conferences div it only appear one conference instead of 2. Do you know where is the issue?
Route:
Route::get('conferences/where/category/{id}','ConferenceController@WhereHasCategory')->name('category.conferences');
ConferenceController method:
public function WhereHasCategory(Request $request)
{
$conferences = Conference::whereHas('categories', function ($categories) use (&$request) {
$categories->where('category_conference.id',$request->id);
})->get();
return response()->json($conferences);
}
Ajax:
$("a[name='category']").on('click', function(){
var category_id = $(this).attr("id");
$('.Categories__Menu li').removeClass('ative');
$(this).parent('li').addClass('ative');
$.ajax({
url: '{{ route('category.conferences',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#conferences').empty();
var newConferences='';
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <div class="card box-shaddow">\n' +
' <img class="card-img-top" src='+ conference.image +' alt="Card image cap">\n' +
' <div class="card-body">\n' +
' <p class="font-size-sm"><i class="fa fa-calendar" aria-hidden="true"></i> '+conference.start_date+'</p>\n' +
' <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>\n' +
' <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.place+', '+conference.city+'</p>\n' +
' </div>\n' +
' <div class="card-footer d-flex justify-content-between align-items-center">\n' +
' <a href="' + url + '" class="btn btn-primary text-white">More</a>' +
' <span class="font-weight-bold font-size-sm text-heading-blue"> </span>\n'+
' </div>\n' +
' </div></div>';
});
$('#conferences').html(newConferenes);
},
error: function(error) {
console.log(error.status)
}
});
});
```
Please or to participate in this conversation.