Why can I not see my object's properties
<p>I'm stumped here and would love to know what I'm mising. </p>

<p>I was just re-writing some code and cleaning some stuff up. I have a method that does an ajax call and returns a json string. Since I use the method a couple of places I abstracted to this method here within a name space. </p>

<p>This is json object returned</p>

<pre><code>{"charge_ID":"4","price":"37","description":"corporate rate"}
</code></pre>

<p>This is the abstracted method.</p>

<pre><code>wwdb.getChargeRate = function( chargeID ){
    var rate = {}, prop;    
    $.post(baseUrl + 'dashboard_job/jx_get_charge_rate',
    {
        'charge_ID': chargeID
    },      
    function( data ){           
        for( prop in data) {
            rate[prop] = data[prop];            
        }       
    }, 
    'json'
    );
    return rate;
};
</code></pre>

<p>I thought I would just be able to assign data to rate but had to iterate through to get that to work. In fact I thought I would be able return data direct from within the function() part of $.post() method, but that didn't work. So question 1. is why can I not just return data? </p>

<p>But much more basic and frustrating is the fact that in the code below I cannot access the object properties. Question 2. is why? </p>

<pre><code>$('#charge_rate_slt').change(function(){

    var t = $(this), v = $(t).val(), rate;

    console.log(wwdb.getChargeRate( v )); //returns object ok

    rate = wwdb.getChargeRate( v ); //assigns object ok

    console.log(rate); //displays in firebug as object with properties

    console.log(rate.price) //undefined

    for(p in rate)
       console.log( p ); //undefined?
});
</code></pre>
