JavaScript JSON.parse tutorial
last modified July 7, 2020
JavaScript JSON.parse tutorial shows how to parse JSON strings into JavaScript objects.
JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format.
It is easy for humans to read and write and for machines to parse and generate.
The official Internet media type for JSON is application/json
.
The JSON filename extension is .json
.
JSON.parse
The JSON.parse()
method parses a JSON string and creates a
JavaScript value or object described by the string. An optional reviver function
can be provided to perform a transformation on the resulting object before it is
returned. The reverse operation is performed with JSON.stringify()
.
JSON.parse values
In the first example, we parse JSON strings into JavaScript values.
console.log(JSON.parse('-3')); console.log(JSON.parse('12')); console.log(JSON.parse('true')); console.log(JSON.parse('"falcon"'));
The example parses and prints integers, a boolean value and a string.
$ node parse_values.js -3 12 true falcon
This is the output.
JSON.parse array
The next example parses a JSON array string into a JavaScript array.
let data = `[ { "id": 1, "first_name": "Robert", "last_name": "Schwartz", "email": "rob23@gmail.com" }, { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "lucyb56@gmail.com" }, { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" } ]`; let users = JSON.parse(data); console.log(typeof users) console.log(users[1]) console.log(users);
We have a JSON string consisting of users. The string is parsed into a JavaScript array.
let users = JSON.parse(data);
The data is parsed.
console.log(typeof users)
We determine the data type of the returned data.
console.log(users[1])
We print the second user.
console.log(users);
We print the whole array.
$ node parse_list.js object { id: 2, first_name: 'Lucy', last_name: 'Ballmer', email: 'lucyb56@gmail.com' } [ { id: 1, first_name: 'Robert', last_name: 'Schwartz', email: 'rob23@gmail.com' }, { id: 2, first_name: 'Lucy', last_name: 'Ballmer', email: 'lucyb56@gmail.com' }, { id: 3, first_name: 'Anna', last_name: 'Smith', email: 'annasmith23@gmail.com' } ]
This is the output.
JSON.parse reviver function
The JSON.parse()
function can take an optional reviver function as
the second parameter. It can perform a transformation on the resulting object
before it is returned.
let data = '{ "name": "John Doe", "dateOfBirth": "1976-12-01", "occupation": "gardener"}'; let user = JSON.parse(data, (k, v) => { if (k == "dateOfBirth") { return new Date(v); } else { return v; } }); console.log(user);
In the example, we use the reviver function to transform a string property into a date.
JSON.stringify
The JSON.stringify()
function converts a JavaScript object or
value to a JSON string.
let users = [ { id: 1, first_name: 'Robert', last_name: 'Schwartz', email: 'rob23@gmail.com' }, { id: 2, first_name: 'Lucy', last_name: 'Ballmer', email: 'lucyb56@gmail.com' }, { id: 3, first_name: 'Anna', last_name: 'Smith', email: 'annasmith23@gmail.com' } ]; let data = JSON.stringify(users); console.log(typeof data); console.log(typeof users); console.log(data); console.log(users);
In the example, we have an array of users. We transform the array into a JSON
string with the JSON.stringify()
function.
$ node stringify.js string object [{"id":1,"first_name":"Robert","last_name":"Schwartz","email":"rob23@gmail.com"}, {"id":2,"first_name":"Lucy","last_name":"Ballmer","email":"lucyb56@gmail.com"}, {"id":3,"first_name":"Anna","last_name":"Smith","email":"annasmith23@gmail.com"}] [ { id: 1, first_name: 'Robert', last_name: 'Schwartz', email: 'rob23@gmail.com' }, { id: 2, first_name: 'Lucy', last_name: 'Ballmer', email: 'lucyb56@gmail.com' }, { id: 3, first_name: 'Anna', last_name: 'Smith', email: 'annasmith23@gmail.com' } ]
This is the output.
In this tutorial, we have parsed JSON strings into JavaScript objects with
the JSON.parse()
function.
List all JavaScript tutorials.