Jquery Mapael: How can I use HTML table data to replace this hard coded example?

Question

Here is the hard coded code that works (only 2 states):

 var myAreas = [];
    myAreas = {
            "VA": {
                value: "6.3",
                tooltip: {  content: "Virginia freq : 7.2"  }
            },
            "NC": {
                value: "5.7",
                tooltip: { content: "North Carolina freq : 6.7" }
            }
        };
        $(".mapcontainer").mapael({
            map: {
                name: "usa_states"
            },
            areas: myAreas
        });

I'm trying to use the results in my HTML table but can't seem to get it into an acceptable format. This is what I have been trying:

var data = [];
    var rows = $('#tblStateFreq').find('tr');
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var state = row.find('td').eq(0).text();
        var freq = row.find('td').eq(1).text();
        data.push({
            state,
            value: freq,
            tooltip: state + " " + freq;
        });
    }
    $(".mapcontainer").mapael({
        map: {
            name: "usa_states"
        },
        areas: data
    });

the data array has all the states with the correct data but it's in the form:

0: state: "AK" tooltip: {content: "AK 7.0"} value: "7.0"

I've used this table data approach successfully with flot for line and column charts but the map seems to be trickier. Can anyone help. Thanks

Answer 1

I found what I was looking for here: Is it possible to add dynamically named properties to JavaScript object?

although the hard coded data, myAreas[] is originally defined as an array it is redefined as an object, myAreas{...} and properties (states) are added.

In my example I was trying to add to my array data[] using push which worked, but is not what the mapeal plugin wants as the areas argument.