Loading data into html5 canvas roullete using ajax - php

Question

I'm trying to load data into the html5 canvas roulette which I found here:
http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas
I added another button called loader which will load the data from a php file. The data is an array of names. I then assigned it to the people array. Then called the drawRouletteWheel(). The drawRouletteWheel uses the data from the people array.
var people = [];
$('#loader').click(function(){
$.post('loader.php', function(data){
people = data;
drawRouletteWheel();
});
});
The loader.php file just loads random records fetched from mysql database:
$select_random = $db->get_results("SELECT people FROM tbl_people ORDER BY RAND() LIMIT 12");
if(!empty($select_random)){
foreach($select_random as $k=>$v){
$data[] = $v->people;
}
echo json_encode($data);
}
Something is actually being loaded into the roulette but it seems to be incomplete. And firebug is also returning something:
What do I need to do here?It seems like the data that was returned from the php file isn't being treated as an array.

Answer 1

The data that is returned from the php page is treated as a string, so you are getting individual letters as javascript gets the character at each index.
To fix this:
var people = [];
$('#loader').click(function(){
$.post('loader.php', function(data){
people = $.parseJSON(data);
drawRouletteWheel();
});
});