Question

I have a json response like:

{ "total": 2, "success": true, "rows": [ {"a1_id":"7847TK10", "output2":"7847TK10", etc. 
etc} ]}

Now my Google Visualization (Pie Chart) code only executes well when:

<script type="text/javascript">

// load visualization library
google.load('visualization', '1', {packages: ['corechart']});

$(function() { 
     // when document loads, grab the json
     $.getJSON('regiontop11.json', function(data) {
         // once grabbed, we run this callback

         // setup the new map and its variables
         var map = new google.visualization.DataTable();
             map.addRows(data.length);  
             map.addColumn('string', 'outputsix');
         map.addColumn('number', 'outputnine');

         // now we need to build the map data, loop over each result
         $.each(data, function(i,v) {
             // set the values for both the name and the population
             map.setValue(i, 0, v.output6);
             map.setValue(i, 1, v.output9);
         });
         // finally, create the map!
         var chart = new google.visualization.PieChart(
           document.getElementById('visualization'));
              chart.draw(map, null);

     });
});

</script>

….I adjust my json to:

[ {"a1_id":"7847TK10", "output2":"7847TK10", etc. etc} ]

Problem is I can’t adjust the json.php itself because the extended (see above) output is necessary for other applications. So just skipping the { “total”: 2, “success”: true, “rows”: portion of it is no option. Both versions are valid Json.
Can I do something in my browser-Pie Code- with eg JQuery? Solutions more than welcome!

regards
Peter

Answer 1

You can pull the content you need out of the JSON envelope before you use it for the DataTable.

If the response is like this:

{
  "total": 2,
  "success": true,
  "rows": [{
      "a1_id": "7847TK10",
      "output2": "7847TK10",
      etc.
      etc
  }]
}

Then you can get what you want like this:

 $.getJSON('regiontop11.json', function(data) {

     var rows = data.rows;

     var map = new google.visualization.DataTable();
     map.addRows(rows.length);  
     map.addColumn('string', 'outputsix');
     map.addColumn('number', 'outputnine');
     ...
     $.each(rows, function(i,v) {
     ...