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.
- Apostrophes or single quotes in JSON data will trigger errors. ^
- The multidimensional array examples provide more information on the type of output you can expect with
json_encode
and more examples demonstrating how to access the data. ^