Using JavaScript's JSON.parse

JavaScript's JSON.parse method parses a JSON string and returns the JavaScript equivalent. Consider the following string which is the JSON representation of a numerically indexed array:

var json = '["apple","orange","banana","strawberry"]';

We pass this string to JSON.parse and assign the result to a data variable. We pass the data variable to console.log to verify that the result is an array. Then we demonstrate access to an element of the data array with an alert:

<script type="text/javascript">
var json = '["apple","orange","banana","strawberry"]';
var data = JSON.parse(json);
console.log(data); // ["apple", "orange", "banana", "strawberry"]
alert( data[3] ); // "strawberry"
</script>

Notice that we can accomplish the same result using JavaScript's eval function:

<script type="text/javascript">
var data2 = eval( '(' + json + ')' );
console.log(data2); // ["apple", "orange", "banana", "strawberry"]
alert( data2[2] ); // "banana"
</script>

However, eval is not recommended since it can pose a security risk. JSON.parse is not only safer, but more efficient.

There may be situations where you are sure of your data and would not need to use JSON.parse as two examples demonstrate. However, use of JSON.parse is advised if the data is coming from an untrusted source. JSON.parse checks the data passed to it and throws a SyntaxError if it's not valid JSON. Any data that could pose a risk is deleted.

Using JSON.parse with PHP's json_encode

The following demonstrates how to use JSON.parse on the JSON string output by PHP's json_encode function:

var data = JSON.parse( '<?php echo json_encode($data) ?>' );

We use this PHP array to demonstrate:

<?php
$books = array(
    array(
        "title" => "Professional JavaScript",
        "author" => "Nicholas C. Zakas"
    ),
    array(
        "title" => "JavaScript: The Definitive Guide",
        "author" => "David Flanagan"
    ),
    array(
        "title" => "High Performance JavaScript",
        "author" => "Nicholas C. Zakas"
    )
);
?>

In the following JavaScript segment, we show passing the PHP $books array to json_encode and the json_encode output to JSON.parse. The result is assigned to the JavaScript variable books. We display the value of books commented out:

<script type="text/javascript">
// using JSON.parse on the output of json_encode
var books = JSON.parse( '<?php echo json_encode($books); ?>' );

/* output (with some whitespace added for readability)
[
    {"title":"Professional JavaScript", "author":"Nicholas C. Zakas"},
    {"title":"JavaScript: The Definitive Guide", "author":"David Flanagan"},
    {"title":"High Performance JavaScript", "author":"Nicholas C. Zakas"}
]
*/

// how to access
console.log( books[1].author ); // David Flanagan
</script>

The PHP tags are enclosed in single quotes inside the JSON.parse function call since JSON uses double quotes for names and values.[1] If you leave out the quotes or use double quotes, JavaScript errors will be triggered.

The following shows how to access the data in books, which is a numerically indexed array of objects:[2]

console.log( books[1].author ); // David Flanagan

JSON.parse's Reviver Option

The JSON.parse method includes an optional second argument: a reviver function that can be used to screen or modify data values. An example demonstrates and provides more information.

Back to top