How to pass data to the table in ajax?

Question

Hi Team

I have search tab, works fine but now i want to figure out once that data gets retrieved from the active directory. It must displayed to the table body(DisplayName, EmailAddress, Department columns here).

// ajax call

<!--Modal form popup for user checks details-->
                        <div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="checkDetailsModalLabel">Select People and Groups</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-md-6 border-right">
                                                    <!-- Left Border: Search -->
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <div class="input-group">
                                                            <input type="text" id="searchInput" class="form-control" placeholder="Search">
                                                            <div class="input-group-append">
                                                                <button class="btn btn-outline-secondary" id="searchButton" type="button">
                                                                    <i class="fas fa-search"></i> Search
                                                                </button>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="border p-3 ">
                                                        <!-- Dropdown List or Other Content Here -->
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Right Border: Table -->
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5 class="mb-0">Details</h5>
                                                    </div>
                                                    <div class="border p-3 table-container table-responsive">
                                                        <!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location -->
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>Display Name</th>
                                                                    <th>E-mail Address</th>
                                                                    <th>Title</th>
                                                                    <th>Department</th>
                                                                    <th>Presence</th>
                                                                    <th>Work Phone</th>
                                                                    <th>Location</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <!-- Table Body Content Here -->
                                                                <tr>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                </tr>
                                                                <!-- Add more rows as needed -->
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--search for active users at the organisation-->
                                    <script>
                                                                    $(document).ready(function () {
    // Function to handle search button click event
    $('#searchButton').on('click', function () {
        var searchTerm = $('#searchInput').val().trim();
        if (searchTerm !== '') {
            // Send an AJAX request to the controller action to search for users
            $.ajax({
                url: '@Url.Action("SearchUsers", "Home")',
                type: 'POST',
                dataType: 'json',
                data: { searchTerm: searchTerm },
                success: function (data) {
                    // Clear previous search results
                    $('#userTable tbody').empty();
                    // Iterate through the retrieved user details and append them to the table
                    $.each(data, function (index, user) {
                        var row = '<tr>' +
                            '<td>' + user.DisplayName + '</td>' +
                            '<td>' + user.Email + '</td>' +
                            '<td>' + user.Title + '</td>' +
                            '<td>' + user.Department + '</td>' +
                            '<td>' + user.Presence + '</td>' +
                            '<td>' + user.WorkPhone + '</td>' +
                            '<td>' + user.Location + '</td>' +
                            '</tr>';
                        $('#userTable tbody').append(row);
                    });
                    // Show the modal with search results
                    $('#checkDetailsModal').modal('show');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // Handle error if any
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        }
    });
});

                                    </script>