Passing PHP array to Javascript array using implode(), join() or json_encode()

Question

I am working on a Wordpress plugin and I need to pass PHP array to Javascript array. I have tried using join(), implode() and even Json_encode. But, the wordpress is not displaying any value.

When using join(), I used the code:

<?php
$php1 = array(1,2,3);

?>
<script language='Javascript'>
var lat = ["<?php echo join("\", \"", $php1); ?>"];
document.write(lat[1]);
</script>

If used on localhost(without wordpress), the above code provides a valid output. But, somehow, its not working on Wordpress. The "apache error log" show this message:

PHP Warning: join() [function.join]: Invalid arguments passed in \wp-content\plugins\Animation\animation.php on line 129, referer: http://localhost/Website/wp-admin/options-general.php?page=js

Same is the case with implode(). Server error log shows same above warning for implode().

Then I tried for json_encode using the code below:

var lat = <?php echo json_encode($php1); ?>;

But the no value is returned.

Edit: Code I used for JSON:

<?php
/*
Plugin Name: PHPToJavascript
*/
$arr = array(1,2,3,4,5,6,7,8,9);            //array to pass

add_action('admin_menu','admin_jav');

function admin_jav(){
add_submenu_page('options-general.php','Javarray','Javarray','manage_options','javarray',jav_handler);
}

function jav_handler(){
echo 'Into handler';

?>
<SCRIPT LANGUAGE = 'Javascript'><!--
var sm=<?php echo json_encode($arr); ?>;      //using Json  

document.write(sm[1]);                       //doesnt display any output!!!

</SCRIPT>
<?php
}
?>

Please guide me through this. I appreciate any help. It would be great if you help me in passing this PHP array to javascript array.

Answer 1

The $arr variable is out of scope. If you want to use the global $arr variable, you need to modify your jav_handler() function to bring the variable into local scope:

function jav_handler(){
    global $arr;
    // ...

However, it's good practice to always avoid global variables when you can, so the preferred way of doing this is to change the function to take the array as an argument and pass it explicitly when calling the function:

function jav_handler($arr){
    // ...
}

jav_handler($arr);

Answer 2

Change:

var lat = ["<?php echo join("\", \"", $php1); ?>"];
document.write(lat[1]);

to:

var lat = ["<?php echo join('", "', $php1); ?>"];
document.write(lat[0]);

Answer 3

Instead of:

var lat = ["<?php echo join("\", \"", $php1); ?>"];

I would try:

var lat = "<?php echo json_encode($php1); ?>";

Additionally, you may want to use a Browser that offers proper JS debugging. In chrome, you can use console.log(lat); to see exactly what lat holds