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();
    });
});