Ajax добавляет много раз для одного результата

Question

Проблема возникает в области поиска студентов. Если число учащихся с одинаковыми именем и фамилией превышает 1 - вместо добавления другой строки таблицы таблица обновляется.

о функциях в контроллерах: search отображает результаты, а userGroup проверяет, принадлежит ли ученик группе, к которой у пользователя есть доступ

 $(document).ready(function(){
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });

    $('#query').on('keyup',function(event){

        $('#results').html();
        var query = $(this).val();

        var errorInfo = () => {
            $('.student-results-table').hide();
            $('#no-result').show();
            var noResult = `
            <b>try again</b>
            `;
            $('#no-result').html(noResult);

        };


        var successInfo = (value, group) => {
            $('#no-result').hide();
            $('.student-results-table').show();

            var result = `
            <tr>
            <td> ${value.firstname}  </td>
            <td> ${value.lastname}  </td>
            <td> ${value.indexNumber}  </td>
            <td> ${group.group}  </td>
            <td>  <a href="/students/${value.id}"> 
            <i class="far fa-list-alt fa-lg" ></i>
            </a></td>
            </tr>
            `;
            $('#results').empty();
            $('#results').append(result);

        };


        $.ajax({
            url:"/search-students",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(students)
            {

            $.each(students.students, function( index, value ){

            $.ajax({
                url:`/user-group/${value.group_id}`,
                        method:'GET',
                        data:{id:value.group_id},
                        dataType:'json',
                        success:function(group)
                        {
                            if(group.success == 'true') successInfo(value, 
    group);
                        },
                        error:errorInfo()
                    });
                });

            },
            error:errorInfo()

        });


        });


    });
// /search-students


public function search(Request $request)
    {
    $query = $request->get('query');
    $data = explode(' ', $query);
    $students = Student::where('firstname', 'LIKE', '%'.$data[0].'%')
        ->where('lastname', 'LIKE', '%'.$data[1].'%')->get();
        if(count($students) > 0) {
            return response()->json(['students'=>$students]);

        } else {
            $message = "Student does not exist";

            return response()->json(['error'=>$message]);
        }   
    }

// /user-group/id
public function userGroup($id = null) 
{
    if(Group::userGroup($id)) {
    $group = Group::findOrFail($id);
    return response()->json(['success'=>'true',
     'group'=> $group->name]);
    } else {
        return response()->json(['error'=>'true']);
    }
}

Answer 1

Я думаю, что ваша проблема вызвана выполнением $ ('# results'). Empty ();внутри функции successInfo.Вы должны сделать это перед вызовом функции, чтобы очистить таблицу и затем вызвать функцию для добавления каждого значения:

 $(document).ready(function(){
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });

    $('#query').on('keyup',function(event){
        $('#results').html();
        var query = $(this).val();

        var errorInfo = () => {
            $('.student-results-table').hide();
            $('#no-result').show();
            var noResult = `
            <b>try again</b>
            `;
            $('#no-result').html(noResult);
        };

        var successInfo = (value, group) => {
            $('#no-result').hide();
            $('.student-results-table').show();

            var result = `
            <tr>
            <td> ${value.firstname}  </td>
            <td> ${value.lastname}  </td>
            <td> ${value.indexNumber}  </td>
            <td> ${group.group}  </td>
            <td>  <a href="/students/${value.id}"> 
            <i class="far fa-list-alt fa-lg" ></i>
            </a></td>
            </tr>
            `;
            $('#results').append(result);
        };

        $.ajax({
            url:"/search-students",
            method:'GET',
            data:{ query:query },
            dataType:'json',
            success:function(students) {

            $.each(students.students, function( index, value ){
                $.ajax({
                    url:`/user-group/${value.group_id}`,
                    method:'GET',
                    data:{id:value.group_id},
                    dataType:'json',
                    success:function(group) {
                        if (group.success == 'true') {
                            $('#results').empty();
                            successInfo(value, group);
                        }
                    },
                    error: errorInfo()
                    });
                });
            },
            error: errorInfo()
        });
    });
});