Use of undefined constant post - assumed 'post' - php

Question

I have a menu with some post categories:
<ul>
#foreach($categories->get() as $category)
<li class="ative">
{{$category->name}}
</li>
#endforeach
</ul>
When I click in the category, for example with id "1", through the menu I want to show the posts that belong to the category with id "1"in the "#posts" div.
So, the #posts div shows the last posts when the page is acessed at first, but after a category is clicked it should show the posts that belong to the clicked category. So I have the #posts div:
<div id="posts">
#foreach($posts as $post)
<div id="posts">
<img src="{{$post->image}}">
<h1>{{$post->title}}</h1>
<!-- ... -->
</div>
#endforeach
</div>
If the category with id "1" is clicked in the console appears the info of the only post that exist for now for that category with id "1":
{id: 1, title: "Title", description: "", …}
Now do you know how to show in the #posts div the posts that belong to the clicked category with the append method? Something like below (but like below dont works):
$('#posts').append(
<div id="posts">
<img src="{{$post->image}}">
<h1>{{$post->title}}</h1>
</div>);
});
I have a FrontController index method that shows the homepage:
public function index(){
return view('home')
->with('categories', Category::orderBy('created_at', 'desc')->get())
->with('posts', Post::orderBy('created_at','desc')->get());
}
I also have a PostController that has a method postsFromCategory to get the posts from a selected category:
public function WhereHasCategory(Request $request)
{
$posts = Post::whereHas('categories', function ($categories) use (&$request) {
$categories->where('category_post.id',$request->id);
})->get();
return response()->json($posts);
}
Then in the index.blade.php I have the ajax:
$.ajax({
url: '{{ route('category.posts',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#posts').empty();
$.each(result, function(index, post) {
newPosts += '<img src="' + post.image + '">' +
+ '<h1>' + post.title + '</h1>';
});
console.log(result);
},
error: function(error) {
console.log(error.status)
}
});

Answer 1

I have never coded in laravel so the syntax is going to be off, but I hope the gist sticks:
First, you should not use duplicate IDs like "posts". Try assigning "post" + $key to every div inside the foreach:
<div id="posts">
#foreach($posts as $key => $post)
<div id="post" + $key>
<img src="{{$post->image}}">
<h1>{{$post->title}}</h1>
<!-- ... -->
</div>
#endforeach
</div>
Now, if you are retrieving the post per category with this code:
$.each(result, function(index, post) {
newPosts += '<img src="' + post.image + '">' +
+ '<h1>' + post.title + '</h1>';
});
you could try:
var newPosts = "";
$.each(result, function(index, post) {
newPosts += '<img src="' + post.image + '">' +
+ '<h1>' + post.title + '</h1>';
});
$('#posts').html(newPosts);
let me know

Answer 2

Change id to class
<div class="posts">
#foreach($posts as $post)
<div id="posts">
<img src="{{$post->image}}">
<h1>{{$post->title}}</h1>
<!-- ... -->
</div>
#endforeach
</div>
The code $('#posts').append() is not needed since we can add it in success callback of ajax.
Chenge the ajax function to this
$.ajax({
url: '{{ route('category.posts') }}',
type: 'GET',
data : { id:category_id },
success:function(result){
$('#posts').empty();
var newPosts='';
$.each(result, function(index, post) {
newPosts += '<img src="' + post.image + '">' +
+ '<h1>' + post.title + '</h1>';
});
$('#posts').html(newPosts);
},
error: function(error) {
console.log(error.status)
}
});