Edit Data on Modal Using Ajax - 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">×</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.