unable to fetch the JSON Data using jquery in ajax

Question

I am unable to fetch the JSON data using jquery in ajax.Getting Uncaught TypeError: Cannot read property 'customers' of undefined error.

<script type="text/javascript">

$("#savechanges").click(function(e) {
e.preventDefault();


jQuery.ajax({
url: "<?=base_url()?>customers/updatecustomerorderdetail",
data: $('#savecustomer input').serialize(),
type: "POST",
dataType: 'json',
beforeSend: function() {
        //$("#update_"+id).html('');
        $("#savechanges").html('<i class="fa fa-spinner fa-spin"></i>updating...');

       },
success:function(data){

        var customer_name = data[0].customers[0].customer_name;

        alert(customer_name);

        console.log(data);


 },
error:function (error){

    console.log(error);
}

});

});

JSON response from the above code

{  
 "customers":[  
   {  
     "customer_id":22,
     "customer_name":"fggfd",
     "customer_email":"fggd",
     "customer_mobile":"dfgf",
     "updated_user_id":"5",
     "updated_datetime":"2018-07-30 21:00:57"
  }
]
}

I want to alert customer_name from the JSON data in the success function of ajax. can anyone please tell me what I am doing wrong here?

Answer 1

Your data is an object clearly not an array so do this: data.customers[0].customer_name;