javascript: object Object instead of value from set =(

Question

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() {
   var d = {
        "totalValue": {
            label: "Total",
            clickable: true,
            hoverable: true,
            data: <%= @total %>
        }
.
.
.
};

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

Answer 1

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());

Answer 2

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".