JQuery (Mobile) /Ajax Undefined returned variable - ajax

Question

Despite many questions regarding this I cannot seem to find some code that works for my situation, every time I run this code I end up with an undefined variable instead of the desired returned JSON.
My AJAX code is:
$.ajax({
data: {"serial":account},
url: 'http://127.0.0.1/MobilePHP/findCustomerName.php',
dataType: 'json',
success: function(data){
window.alert(data);
}
});
And my PHP code is:
<?php
header("Access-Control-Allow-Origin: *");
header('Content-type: application/json');
include 'dbConfig.php';
include 'connectDB.php';
//$account = $_POST['serial'];
$account = 14;
$sth = mysql_query("SELECT customer_name AS Name FROM customer_details WHERE auto_id = $account ");
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$rows ['CustomerName'][] = $r;
}
echo json_encode($rows);
include 'closeDB.php';
?>
And my JSON from my console is:
{"CustomerName":[{"Name":"Tullaroan"}]}
I am really unsure of why I cannot access these variables as it seems to return the right JSON on the console.

Answer 1

Inside the success function, data is an object with a single property: CustomerName. To access that, you use data.CustomerName. That property is itself an array, so you'll need to access elements inside it using their index.
In your example, you have a single object in the array, so to access that object you'd do data.CustomerName[0]. That object also has a single property: Name, so to get the actual name out you'd do: data.CustomerName[0].Name, which would return "Tullaroan".
It might be easier to visualise the breakdown of the data object like this:
data = {"CustomerName":[{"Name":"Tullaroan"}]}
data.CustomerName = [{"Name":"Tullaroan"}]
data.CustomerName[0] = {"Name":"Tullaroan"}
data.CustomerName[0].Name = "Tullaroan"