Data not passing correctly with wp_localize_script

Question

I'm trying to pass PHP data to a JS script. I'm using the wp_localize_script function.

wp_register_script('googlechart', 'https://www.gstatic.com/charts/loader.js');
wp_register_script('mygaloochart_script', plugins_url('chart.js', __FILE__), array('googlechart'));

//I'm not using $atts directly for reasons
$dataToBePassed = array (
        'chart' => $atts['chart'],
        'element' => $atts['element'],
        'elementtype' => $atts['elementtype'],
        'title' => $atts['title']
);

wp_localize_script('mygaloochart_script', 'php_vars', $datatoBePassed);

wp_enqueue_script('googlechart');
wp_enqueue_script('mygaloochart_script');

This is the first line of the JS script mygaloochart_script:

console.log(php_vars.chart);

However, I get the following error in the console:

TypeError: php_vars is null

What am I doing wrong?

Answer 1

I am unable to comment due to my reputation. Just curious to ask, did you hook the function something like the below?

Update

function add_vars_to_js(){

wp_register_script('googlechart', 'https://www.gstatic.com/charts/loader.js');
wp_register_script('mygaloochart_script', plugins_url('chart.js', __FILE__), array('googlechart'));

//I'm not using $atts directly for reasons
$dataToBePassed = array (
        'chart' => $atts['chart'],
        'element' => $atts['element'],
        'elementtype' => $atts['elementtype'],
        'title' => $atts['title']
);

wp_localize_script('mygaloochart_script', 'php_vars', $datatoBePassed);

wp_enqueue_script('googlechart');
wp_enqueue_script('mygaloochart_script');
}

add_action('wp_enqueue_scripts', 'add_vars_to_js');

Answer 2

The name of your array is $dataToBePassed. However you are passing $datatoBePassed in your wp_localize_script function. Big T, small t. PHP variable names are case sensitive.