Reputation: 341
i'm having trouble with building an array in js to pass into a charts.js obj. I have the following array;
{"Questions":{"name":"Hello World"},"Options":{"inner":{"No":"723","Yes":"6","Maybe":"0"}}}
Which is passed through to the function below as 'response'. I want to cycle through each item in the 'inner' array and build an array of objects to pass into my chart.js.
function drawChart(response){
var array = JSON.parse(response)
var options = array['Options']['inner'];
for(var option in options){
var datasetValue = [];
datasetValue.push = {
value: parseInt(options[option]),
color: "#F7464A",
highlight: "#FF5A5E",
label: option
}
}
console.log(datasetValue);
var mydata = {
datasetValue
}
var pieData = [
{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var ctxOptions = {
responsive: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
showTooltips: false,
};
var pie_ctx = document.getElementById("donut").getContext("2d");
var chart = new Chart(pie_ctx).Doughnut(mydata, ctxOptions);
}
You can see above i have two arrays, my dynamic array i'm trying to build 'datasetValue' and 'pieData'. pieData is a sample, and if i pass this array into my new chart, the array works fine, but my datasetValue only seems to contain the last item, rather that all the objects as pieData does. Heres an output from my console.log(datasetValue);
[push: Object]
push
:
Object
color
:
"#F7464A"
highlight
:
"#FF5A5E"
label
:
"Maybe"
value
:
0
What i'm i doing wring in rebuilding my array to match the pieData array format?
Upvotes: 1
Views: 1161
Reputation: 8292
Your datasetValue contains only last item because you instantiate it in for loop. Every time you go in a for loop, datasetValue will be recreated (set to empty array), therefore you only log the 'last' item. You should instantiate it outside the for loop.
var datasetValue = [];
for(var option in options){
datasetValue.push = {
value: parseInt(options[option]),
color: "#F7464A",
highlight: "#FF5A5E",
label: option
}
}
Upvotes: 2
Reputation: 1199
I think datasetValue.push = {
is overriding the Array.push
function for datasetValue
. Try datasetValue.push( {
to append.
Also, it's likely that only the very last value will be added to datasetValue
since you're resetting it on every iteration:
for(var option in options){
var datasetValue = [];
Upvotes: 3