jquery how to dynamically create an array

Question

i want to use this script: http://codepen.io/githiro/pen/xABCi

You can set each piece like this:

 $("#pieChart").drawPieChart([
 { title: "Tokyo", value : 180, color: "#02B3E7" },
 { title: "San Francisco", value: 60, color: "#CFD3D6" },
 { title: "London", value : 50, color: "#736D79" },
 { title: "New York", value: 30, color: "#776068" },
 { title: "Sydney", value : 20, color: "#EB0D42" },
 { title: "Berlin", value : 20, color: "#FFEC62" },
 { title: "Osaka", value : 7, color: "#04374E" }
 ]);

I want to set the settings/pieces dynamically. This is what i tried:

$('.pieChart').each(function(index) {
 var queryArr = [];
 $('.pieChartPieces').each(function(index) {
 var _pieceTitle = $(this).data('title');
 var _pieceValue = $(this).data('value');
 var _pieceColor = $(this).data('color');
 var pieces = { 
 "title" :_pieceTitle,
 "value" :_pieceValue,
 "color" :_pieceColor
 };
 queryStr = { "pieces" : pieces };
 queryArr.push(queryStr);
 });
 $(this).drawPieChart(queryArr);
});
 <div class="pieChart chart">
 <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
 <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
 <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
 <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
 <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
 <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
 <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
 </div>

But its not working. I guess its because i create an object but the function drawPieChart actually want anything else?

Answer 1

try replacing this part

 var pieces = { 
 "title" :_pieceTitle,
 "value" :_pieceValue,
 "color" :_pieceColor
 };
 queryStr = { "pieces" : pieces };
 queryArr.push(queryStr);

by

 var pieces = { 
 "title" :_pieceTitle,
 "value" :_pieceValue,
 "color" :_pieceColor
 };
 queryArr.push( pieces );

• gurvinder372: @egolive happy to help

Answer 2

You can use dataset in combination with .map() method in this case, it will let you create an array with objects of every data-* attribute:

var arr = $('.pieChartPieces').map(function(){
 return {"pieces":this.dataset};
}).get(); // returns array
$('pre').html("piechartData:::"+JSON.stringify(arr));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pieChart chart">
 <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
 <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
 <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
 <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
 <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
 <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
 <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
</div>
<pre></pre>