How can I declare a variable for each object in the JSON file?

Question

I have a data.json file that contain 4 objects : a , b , c , d.

Manually

I declared my variables manually.

var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));

Dynamically

Now, I want to make it dynamically so it can handle all the objects in my JSON file, and it doesn't break - when I add more objects to my JSON file.

So while in the loop, I tried add :

chart[object] = new google.visualization.PieChart($('#sa-piechart-'+ object.toLowerCase() )); // <---- I try to add this line

I got my objects from Ajax call.

var data = {};
var chart = {};

for (var object in objects) {

  var total = objects[object].danger + objects[object].warning + objects[object].success ;


  data[object] = google.visualization.arrayToDataTable([

    ['Piechart' , 'Number of Skills'],
    ['danger'   , ( objects[object].danger/total )  * 100  ],
    ['warning'  , ( objects[object].warning/total ) * 100  ],
    ['success'  , ( objects[object].success/total ) * 100  ],

    ]);

   //console.log( '#sa-piechart-' + object.toLowerCase() ); // Return #sa-piechart-a  

   chart[object] = new google.visualization.PieChart($('#sa-piechart-'+ object.toLowerCase() )); // <---- I try to add this line

}

// var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
// var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
// var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
// var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));

Result

I keep getting Uncaught Error: Container is not defined

Any hints / suggestions will be much appreciated !

Update

enter image description here

This error usually means that this element is not found in the DOM. Make sure that object.toLowerCase() really returns something, and that concatenated with 'sa-piechart-' make up for a real/existing element. — Hanlet Escaño
– Hanlet Escaño, Commented Jun 29, 2015 at 19:39
@HanletEscaño : I tried console.log, I got it to print out correctly as I expected. — code-8
– code-8, Commented Jun 29, 2015 at 19:49
Are these HTML elements being generated dynamically? If not, please post the markup. — Hanlet Escaño
– Hanlet Escaño, Commented Jun 29, 2015 at 19:50

Dhiraj · Accepted Answer · 2015-06-29 19:54:20Z

1

Container is not defined means that DOM element is not found as mentioned in the comments. You would need to dynamically create the elements and then pass them to google pie chart. Something like this should do.

var el = document.getElementById('sa-piechart-' + object);
if (!el) {
  el = document.createElement('div');
  el.id = object;
  document.body.appendChild(el); // <--- I added to body. Add to required element
}
chart[object] = new google.visualization.PieChart(el); 
chart[object].draw(data[object]);

Here is a demo http://jsfiddle.net/6M2sH/443/

A much fancier solution (using jQuery)

var $el = $('#sa-piechart-' + object).length ? $('#sa-piechart-' + object) : $('<div id="#sa-piechart-' + object+'"></div>').appendTo('body');
chart[object] = new google.visualization.PieChart($el[0]);

Fancier demo http://jsfiddle.net/6M2sH/444/

edited Jun 29, 2015 at 19:54

answered Jun 29, 2015 at 19:49

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I declare a variable for each object in the JSON file?

Manually

Dynamically

Result

Update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Manually

Dynamically

Result

Update

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related