Chrome not consoling JS object completely

Question

I am making an AJAX post request with response in JSON. My ajax code is

$.ajax({
    type: "POST",
    url: "admin/vendors_post.php",
    data: "vendet_req=fetch&venid="+sel_ven,
    dataType: 'json',
    beforeSend: function(){
        $('#trans_loader').css("display", "table");
    },
    success: function(response){
        console.log(response);
    }
});

Consoling the object shows

When consoled object is explored

The problem is that, the object that I have received in response is not showing some object properties when explored. But when I try to call them explicitly using the dot notation, I get the proper value. I wasted my time looking for those few variables that were not shown when I console the whole response object. For reference, the properties 'id', 'com_name', 'cat_name', etc are not displayed when the console object is explored (refer attached image number 2 above).

What can be the issue? Why the object was not consoled with all properties? I am using jQuery 2.2.0. And using php 5.4.31 on the server side.

NOTE: The object size as per JavaScript is 24, while the actual size, sent from the server, is 29. Though I am able to access those 5 properties explicitly. I am sending data from php post file after 'json_encode()'ing.

Answer 1

Adding my comment here, so it's easier to find from the references:

If there's a data transformation between the console.log() and when you expand the items in the console, this can happen.

When the data is logged to the console, it's the state you are after, however if anything changes your data throughout the code, the entry in the browser's console will refer to the updated values.

Answer 2

Yes. @Alex is correct. @Yogesh try to avoid that function call and check the console.