Passing A PHP Array To JavaScript

This is a guide on how to pass PHP arrays to JavaScript.

Converting your array into JSON.

The best approach is to transform the array into JSON before passing it to the script in question.

To convert your PHP array into JSON, you can use the json_encode function, which will return the JSON representation of the value that you have passed it.

For example, let’s say that we have a basic associative array that looks like this:

1 2 3 4 5 6

<?php $cartInfo = array(     'num_cart_items' => 3,     'cart_total' => 34.23,     'currency' => 'USD' );

Now, let’s say for example that we want to pass the $cartInfo array to one of our JS scripts so that we can do some client-side wizardry. The first thing we’ll do is convert it in JSON:

1 2 3 4 5 6 7 8 9 10

<?php //our array $cart_info = array(     'num_cart_items' => 3,     'cart_total' => 34.23,     'currency' => 'USD' );   //convert array into json $cart_info_json = json_encode($cart_info);

If you echo out the $cart_info_json variable above, you’ll see that we’re left with a string that looks like this:

1 2	//result {"num_cart_items":3,"cart_total":34.23,"currency":"USD"}

Then, in our JavaScript, we’ll do something like this:

1 2 3

<script type="text/javascript">     var obj = JSON.parse('<?= $var; ?>'); </script>

Like with all JavaScript variables, you can use the console.log function to dump out its structure to the console. In our example, the variable obj will look like this:

1 2 3 4 5

Object     cart_total: 34.23     currency: "USD"     num_cart_items: 3     __proto__: Object

This means that we can now access the data like so:

1 2 3 4

<script type="text/javascript">     var obj = JSON.parse('<?= $cart_info_json; ?>');     alert("There are " + obj.num_cart_items + " cart items."); </script>