Using Map Function To Get Lists' Data Attributes Into An Array In Jquery

Working example Fail example I'm using this pie chart plugin. I want to create an array like this [['Male',12,'some text','#222'], ['Female',14,'some text',

Solution 1:

There are 2 problems.

1. The use of .map() is not proper
2. The color should be hexa value(haven't used the said plugin so don't know if there is a way to make color names to work)

functionchart(stats) {
  newChart.Pie('age', {
    showTooltips: true,
    chartMinSize: [200, 200],
    chartMaxSize: [250, 250],
    chartData: stats
  });
}

var arr = [],
  stats = $('.piearea li').map(function() {
    return [$(this).data('value').split(',')];
  }).get();
console.log(stats);
console.log(JSON.stringify(stats));

chart(stats);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://article-sharing.com/pie.js"></script><divclass="piearea"><divid='age'class='myChart'style='position:relative;width:250px;height:250px;'></div><ul><lidata-value="12 or below,6,sometext, #222">12 or below</li><lidata-value="13 or above,19,sometext, #333">13 or above</li></ul></div>

Solution 2:

Your map call should just be:

$('.piearea li').map(function() {
    return [$(this).data('value').split(',')];
});       

The inner .each() call is your problem: $(this) will only return a jQuery object with one item, and you are trying to use app to return out of it but you never use the variable again.