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)

function chart(stats) {
  new Chart.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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://article-sharing.com/pie.js"></script>
<div class="piearea">
  <div id='age' class='myChart' style='position:relative;width:250px;height:250px;'></div>
  <ul>
    <li data-value="12 or below,6,sometext, #222">12 or below</li>
    <li data-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.