Why does AJAX return 1 Comment 22 times?

Question

AJAX

I wrote a method for returning comments without reloading the page, it works very strange. I chose 1 comment from the database, multiplied it and displayed it.

public function ListComment(){
        $comments  = Comment::all() where('comment_id', 0)->get();
    
        return response()->json(['data' => $comments]);
       }

commentlist = function(){
$.ajax({
url: 'api/Show',
type: "POST",
success: function(response){
data = response.data;
for($i = 0; $i < response.data.length; $i++  ){
 $("#commentshow").append("<div class='col-md-12' style='margin-top:20px;'><div class='card'><div class='card-header'><h3>"+response.data[1].name+"</h3></div><div class='card-body'>"+response.data[1].comment+"</div></div></div>");
}
}
});

and another question. Before the comments on Ajax, I had the usual ones with a reload, it looked something like this.

public function show($slug)
  {
    $article = blog_article::where('slug', $slug)->first();
    $comments  = $article->comments()->where('comment_id', 0)->get();

    return view('show', compact('article', 'comments')) ;
  }

What is the best way to extract comments of a certain article? I do not want to make another request to the database for the sake of related data.

Answer 1

Instead of .data[1]. should be .data[i].