Help adding json data to a table

[Tracy Ridge]

Hi
I am working on a charity project. Basically I add a list of names and donations to a json file then parse it with PHP and pass it on to a data table and a stacked column chart.  I have set up my json file like so.

<pre>
{
  "Individual":[
                {"name":"David Power","amount":300},
                {"name":"John Stelling","amount":50}
             ],
   "Company":[
                {"name":"BP","amount":3000},
                {"name":"Total","amount":4050}
               ],
   "Fundraising":[
                {"name":"London Marathon","amount":6000},
                {"name":"Tea Party","amount":500}
                ]
}

</pre>
  
I have organised it in this way so that I can separate individual donations from fundraising and company donations.  I have successfully created a stacked column chart of all the total donations from each category(fundraising-6500,company-7050 etc).  Wrapped this in a separate PHP function and called via a separate ajax request to avoid conflicts.

My problem is I want to now manipulate all the data and place the names and amount it in a table displaying the top 10 highest donations with the highest amount being displayed at the top and have an extra column with the type of donation.

Example Table

I have parsed the data with PHP and passed it on to my table page through a ajax request. I am unsure whether to do the manipulation with the PHP or with Javascript and how to pass the data to the table.

So far I have
<pre>    function drawTable() {
        var jsonTableData = $.ajax({
          url: "bin/get_data.php?page=1",
          dataType:"json",
          async: false
          }).responseText;
         
        var obj = jQuery.parseJSON(jsonTableData);
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Amount');
        data.addColumn('string',  'Type');
        data.addRows([
          ['David Power',  {v: 300, f: '£300'},'Individual']//Not sure how to get data from json file into this
        ]);
       
        var options = {'width':600};
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data,options);
      }
</pre>
Any advice would be gratefully appreciated.

Thanks in advance

[Tracy Ridge]

Sorry didn't realize that <pre> tags didn't work  Please omit them.

[asgallant]

Parsing the JSON isn't hard - it works just like any other javascript object map.  See an example using your code here: http://jsfiddle.net/asgallant/HMbYf/ 

[Tracy Ridge]

Thankyou so much.  I haven't used Javascript a great deal so I was kinda going around in circles.  I had to use:

var obj = jQuery.parseJSON(jsonTableData);

to get it to work as it just displayed a list of numbers in the 3rd column.

Thanks again.