使用Ajax在模态上编辑数据

Question

I want to edit my data on a modal and I can't pass my data from JSON to the modal. I tried to print my JSON using console.log() function and it works fine. But when I'm trying to pass the data to my modal, it doesn't work. Here's my script:

    $(document).on('click', '.editBtn', function(e){
    e.preventDefault();
    edit_id = $(this).attr("id");
    $.ajax({
        url:"action.php",
        method:"POST",
        data:{edit_id:edit_id},
        dataType:"json",
        success:function(data){
            // data = JSON.parse(response);
            console.log(data);
            $('#id').val(data.id); //id name of the modal; the hidden type
            $('#fname').val(data.fname);
            $('#lname').val(data.lname);
            $('#email').val(data.email);
            $('#phone').val(data.phone);
        }
    });
});

Here's how I encode my JSON:

    if (isset($_POST['edit_id'])){
    $id = $_POST['edit_id'];

    $row = $db->getUserById($id);
    echo json_encode($row);
}

And here's my code for getUserByID():

public function getUserById($id){
        $sql = "SELECT * FROM users WHERE id = ?";
        $stmt = $this->conn->prepare($sql);
        $stmt->execute([$id]);
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $result;
    }

Btw, here's my code for the modal:

<div class="modal fade" id="editModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit User</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body px-4">
                <form accept="" method="post" id="edit-form-data">
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <input type="text" name="fname" class="form-control" id="fname" required>
                    </div>
                    <div class="form-group">
                        <input type="text" name="lname" class="form-control" id="lname" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" class="form-control" id="email" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" name="phone" class="form-control" id="phone" required>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="update" id="update" value="Update User" class="btn btn-primary btn-block">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

I've already figured it out. My code in script is incomplete. It should be data[0].id etc.