Pass PHP Arrays to JSON and JS with json_encode

The PHP json_encode function translates the data passed to it to a JSON string which can then be output to a JavaScript variable. We demonstrate on this page with single level arrays. Other pages demonstrate using json_encode with multi-dimensional arrays and scalar values.

The PHP json_encode function returns a string containing the JSON equivalent of the value passed to it as we demonstrate here with a numerically indexed array:

<?php
$ar = array('apple', 'orange', 'banana', 'strawberry');
echo json_encode($ar); // ["apple","orange","banana","strawberry"]
?>

You can pass the JSON string output by json_encode to a JavaScript variable as follows:

<script type="text/javascript">
// pass PHP variable declared above to JavaScript variable
var ar = <?php echo json_encode($ar) ?>;
</script>

A numerically indexed PHP array is translated to an array literal in the JSON string. A JSON_FORCE_OBJECT option can be used if you want the array to be output as an object instead:

<?php
echo json_encode($ar, JSON_FORCE_OBJECT);
// {"0":"apple","1":"orange","2":"banana","3":"strawberry"} 
?>

Notice that the JSON string contains no white space, which can make it difficult to read. A JSON_PRETTY_PRINT option[1] can be used to format the JSON output. It is demonstrated in the associative array example below.

Numerically Indexed Array Example

This example demonstrates passing a numerically indexed PHP array consisting of string, numeric, boolean, and null values to json_encode. We echo the output of json_encode into a JavaScript variable and the result is an array literal:

<?php
$ar = array('apple', 'orange', 1, false, null, true, 3 + 5);
?>
<script type="text/javascript">
var ar = <?php echo json_encode($ar) ?>;
// ["apple","orange",1,false,null,true,8];
// access 4th element in array
alert( ar[3] ); // false
</script>

We use an alert to demonstrate access to elements of the array. Notice that the data types have been preserved whereas with the old-fashioned approach they were converted to strings.

Associative Array Example

This example shows an associative PHP array output into JavaScript using json_encode. Notice that PHP's associative array becomes an object literal in JavaScript:

<?php
$book = array(
    "title" => "JavaScript: The Definitive Guide",
    "author" => "David Flanagan",
    "edition" => 6
);
?>
<script type="text/javascript">
var book = <?php echo json_encode($book, JSON_PRETTY_PRINT) ?>;
/* var book = {
    "title": "JavaScript: The Definitive Guide",
    "author": "David Flanagan",
    "edition": 6
}; */
alert(book.title);
</script>

We use the JSON_PRETTY_PRINT option as the second argument to json_encode to display the output in a readable format.

You can access object properties using dot syntax, as displayed with the alert included above, or square bracket syntax: book['title'].

What About JSON.parse?

Perhaps you noticed that JavaScript's JSON.parse was not applied to the result in this example. Although it is not always necessary to run the results of json_encode through a parser on the JavaScript side, you will generally want to do so. Find out more about when and how to use JSON.parse.

Download Examples

A download file provides this tutorial's examples free of charge. Donations are appreciated!


  1. The json_encode function also provides other options which the PHP Manual lists and demonstrates. ^