来自ajax中JSON响应的值返回未定义

Question

I'm having some problems when trying to retrieve values from a JSON response sent via the $.post() method in jQuery. Here is the script:

var clickedName = $('#customerId').val();

$.post("/customer-search", { name: clickedName }).done( function(response) {
    var results = $.parseJSON(response);    
    console.log(results);

    $('#account-name').html(results.firstname + ' ' + results.lastname);
    $('#email').html(results.email);
    $('#telephone').html(results.telephone);
    if (results.fax) {
        $('#fax').html(results.fax);
    } else {
        $('#fax').html('n/a');
    }
    $('#personal').fadeIn();
    return false;
});

Just to explain, I'm using twitter typeahead in a Symfony2 project, and basically this script will fire when a name is clicked (selected) from the list after typing. The customer-search URL runs a search of the database as follows:

$q = $request->request->get('name');
$em = $this->getDoctrine()->getManager();
$customer = $em->getRepository('AppBundle:Oc73Customer')->findLikeName($q);
$addresses = $em->getRepository('AppBundle:Oc73Address')->findByCustomerId($customer[0]['customerId']);

$results = array();
$results['customer'] = $customer;
$results['addresses'] = $addresses;

return new Response(json_encode($results));

Which will successfully return a Json encoded response, and the value of 'response' which is printed in the console (as per the jquery above) is:

{
    "customer": [{
        "firstname": "Mike",
        "lastname": "Emerson",
        "email": "xxxx@xxxx.co.uk",
        "telephone": "01234 5678910",
        "fax": null,
        "password": "8e1f951c310af4c20e2cd6b68dee506ac685d7ae",
        "salt": "e2b9e6ced",
        "cart": null,
        "wishlist": null,
        "newsletter": 0,
        "addressId": 84,
        "customerGroupId": 1,
        "ip": null,
        "status": 1,
        "approved": 1,
        "token": null,
        "dateAdded": {
            "date": "2016-02-16 12:59:28.000000",
            "timezone_type": 3,
            "timezone": "Europe/Berlin"
        },
        "availCredit": null,
        "customerId": 75
    }],
    "addresses": [{}]
}

I am trying to retrieve the customer details by using the method I always use, so to get the firstname, I use results.firstname where results is a parsed JSON string, as written in my jQuery response.

However, all I get from results.firstname is undefined , even when it clearly is defined. So, basically, I'm wondering what I am doing wrong?

Hope someone can shed some light on my problem.

Answer 1

The properties you're trying to access are objects in the customer array, not on the parent object itself. Assuming that the response only ever contains one customer object then you can use result.customer[0] , like this:

$.post("/customer-search", { name: clickedName }).done(function(response) {
    var results = $.parseJSON(response);
    var customer = response.customer[0];

    $('#account-name').html(customer.firstname + ' ' + customer.lastname);
    $('#email').html(customer.email);
    $('#telephone').html(customer.telephone);
    $('#fax').html(customer.fax ? customer.fax : 'n/a');
    $('#personal').fadeIn();
});

If it's possible that multiple customer objects will be returned in the array the you would need to amend your code to loop through those objects and build the HTML to display them all - without using id attributes.

Answer 2

I was able to access it like "results.customer[0].firstname"

var cus = 
    {
    "customer": [{
        "firstname": "Mike",
        "lastname": "Emerson",
        "email": "xxxx@xxxx.co.uk",
        "telephone": "01234 5678910",
        "fax": null,
        "password": "8e1f951c310af4c20e2cd6b68dee506ac685d7ae",
        "salt": "e2b9e6ced",
        "cart": null,
        "wishlist": null,
        "newsletter": 0,
        "addressId": 84,
        "customerGroupId": 1,
        "ip": null,
        "status": 1,
        "approved": 1,
        "token": null,
        "dateAdded": {
            "date": "2016-02-16 12:59:28.000000",
            "timezone_type": 3,
            "timezone": "Europe/Berlin"
        },
        "availCredit": null,
        "customerId": 75
    }],
    "addresses": [{}]
}
    alert(cus.customer[0].firstname);