javascript: object Object instead of value from set =(

So, I'm trying to have same data plotted based on a drop down filter, but I haven't gotten past the storing the data to the variable passing to the plotting function. my alert gives object Object, but shouldn't it be totalValue (for this example)?

the html

   <select id="performance_chart_filter">
  <option value="totalValue">Total by Value</option>
  <option value="openValue">Open by Value</option>
  <option value="declinedValue">Declined by Value</option>
  <option value="acceptedValue">Accepted by Value</option>
</select>

the javascript

$j("#performance_chart_filter").change(function(){
    plotWithChoice();
});



function plotWithChoice开发者_StackOverflow() {
   var d = {
        "totalValue": {
            label: "Total",
            clickable: true,
            hoverable: true,
            data: <%= @total %>
        }
.
.
.
};

    var filter = $j("#performance_chart_filter");
    var data = [d[filter.val()]];
alert(data);

No. filter.val() would most likely be the string "totalValue".

d[filter.val()] (or d["totalValue"]) would be the value of the property totalValue of the object d, which is an object thus the output Object object of the alert, because that's the default string representation of a generic object like this.

And [d[filter.val()]] is a Array with one element namely the object mentioned above.

To debug this, I'd suggest you use a Debugger (such as Firebug), because that can display objects in a readable form.

Or use the .toSource() method:

alert(data.toSource());

If all the members of the d object are similar to the one shown, and d is in scope, then alert(data) will always will show "object Object".

If filter.val() is "totalValue", then data will be the Object:

{
  label: "Total",
  clickable: true,
  hoverable: true,
  data: <%= @total %>
}

This doesn't have an explicit toString method, so the default toString will be used.

Try alert(data.label), hopefully this will show "Total".