In Laravel + JQuery, I want to realize that when I click a button, Ajax sends a GET request to the controller and the value returned by json is displayed on html.
I'm fetching the value by turning the fetched associative array with each, but when I display it on html, only the last one result I fetched is displayed.
Assuming that if two results were taken out, the two results would be displayed in html.

In console.log (value.name) under $.each, the value is as expected.

However, when I actually displayed it on html, only the last result (test2) I took out was displayed.

It's a situation where I haven't been able to grasp the cause well and have been stuck.
We would appreciate it if you could tell us about the possible reasons for this.

$("# bt"). click (function () {
  $.ajax ({{
    type: "get", // HTTP communication type
    url: "/ getuser",
    dataType: "json",
    // When communication is successful
    .done ((res) =>{
      // console.log (res)
      $.each (res, function (index, value) {
        console.log (value.name)
        html = `
                        <td>Username: ${value.name}</td>
      $(". User-table"). append (html);// Add the resulting template to the view
    // When communication fails
    .fail ((error) =>{
      console.log (error.statusText);
// Controller side
  public function getUser ()
    $users = User :: select ('name','email')->get ();
    return $users;
  • Answer # 1

    This is because it appends at the bottom of the loop.
    Only the result that has been overwritten all the time remains.
    Please append inside.

    If you want to debug, the variable just before append rather than the value itselfhtmlis.