尝试使用AJAX和JSON填充表单时出现未捕获类型错误

Question

So upon examining the development console, i can see that my AJAX has succeeded, and I have recieved the JSON data I need, However I can't put my finger on how to display it correctly as I keep getting the following error:

Uncaught TypeError: Cannot read property 'name' of undefined
at Object.success (main.js:11)
at Object.resolveWith (jquery.min.js:16)
at v (jquery.min.js:16)
at XMLHttpRequest.c (jquery.min.js:16)

AJAX output:

Object {rows: Object, response: true}
response:true
rows:Object
address:"testestset"
classid:"2"
dob:"1993-04-27"
email:"tests"
gender:"M"
id:"5"
name:"Second Birthday Test"
parent:"Testerr"
phone:"07123456789"
status:"1"

Main.js:

function getGymnasts(val){
$.ajax({
    type:"POST",
    url:"ajax_populate_gymnasts.php",
    data: 'gymnast='+val,
    success: function(response){
        var result = JSON.parse(response);
        if (result.response == true) {
            //console.log(result);
            var data = result.rows;
            console.log(data);
            $("#dob").val(data['rows'].dob);
            $("#gender").val(data['rows'].gender);
            $("#parent").val(data['rows'].parent);
            $("#email").val(data['rows'].email);
            $("#phone").val(data['rows'].phone);
            $("#address").val(data['rows'].address);
            $("#status").val(data['rows'].status);
        }else if (result.response == false) {
            $('#gymnast').append('<option>No Gymnasts were found!</option>');
        }
    }
});
}

function populateReports(val){
$.ajax({
    type:"POST",
    url:"ajax_populate.php",
    data: 'classid='+val,
    success: function(data){
        $("#gymnast").html(data);
    }
});
}

ajax_populate_gymnasts.php

<?php
require('../includes/dbconnect.php');
$gymnastid = $_POST['gymnast'];
$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
$result = mysqli_query($GLOBALS['link'], $sql);

if (mysqli_num_rows($result) > 0) {
$data = mysqli_fetch_assoc($result);
echo json_encode(['rows' => $data, 'response' => true]);
} else {
echo json_encode(['response' => false]);
}
mysqli_close($GLOBALS['link']);
exit();
?>

editGymnasts.php:

<?php require('adminheader.php');
?>
<h1>Edit Gymnast</h1>
<form method="post">
<label for="gymnast">Gymnast:</label>
    <select id="gymnast" name="gymnast" onChange="getGymnasts(this.value)" required/>
        <option value="0">None yet</option>
        <?php  
            $gymnasts = mysqli_query($GLOBALS['link'], "SELECT * FROM gymnasts;");
            foreach($gymnasts as $gymnast){
            echo("<option value=".$gymnast['id'].">".$gymnast['name']."</option>");
            }
        ?>
    </select><br>
<label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" required/>
<label for="gender">Gender:</label>
    <select id="gender" name="gender" required />
        <option value="F">Female</option>
        <option value="M">Male</option>
    </select><br>
<label for="parent">Parent's Name:</label>
    <input type="text" id="parent" value="derp" name="parent" required /> <br>
<label for="email">Contact Email:</label>
    <input type="text" id="email" name="email" required /> <br>
<label for="phone">Contact Phone:</label>
    <input type="text" id="phone" name="phone" required /> <br>
<label for="parent">Contact Addres:</label>
    <textarea id="address" name="address" required /></textarea><br>
<select id="status" name="status" required />
        <option value="0"></option>

<input type="submit" id="saveChanges" name="saveChanges"  />
</form>

Answer 1

So it turns out i was unnecessarily entering an undefined nested array.

$("#dob").val(data['rows'].dob);

Should have been

$("#dob").val(data.dob);