JavaScript JSON.parse

last modified last modified October 18, 2023

In this article we show 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.

JS 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

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('-------------------');
console.log(users[1])
console.log('-------------------');
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_array.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'
 }
]

JSON.parse nested arrays

In the next example, we parse JSON data that contains nested arrays.

let user = `{
 "username": "John Doe",
 "email": "john.doe@example.com",
 "state": "married",
 "profiles": [
 {"name": "jd7", "job": "actor" },
 {"name": "johnd7", "job": "spy"}
 ],
 "active": true,
 "employed": true
}`;
let data = JSON.parse(user);
function printValues(obj) {
 for(var k in obj) {
 if(obj[k] instanceof Object) {
 printValues(obj[k]);
 } else {
 console.log(obj[k]);
 };
 }
};
printValues(data);
console.log('-------------------');
Object.entries(data).map((e) => {
 console.log(e);
});

We go over the parsed JSON object with a recursive printValues function and the Object.entries function.

$ node parse_nested_arrays.js 
John Doe
john.doe@example.com
married
jd7
actor
johnd7
spy
true
true
-------------------
[ 'username', 'John Doe' ]
[ 'email', 'john.doe@example.com' ]
[ 'state', 'married' ]
[
 'profiles',
 [ { name: 'jd7', job: 'actor' }, { name: 'johnd7', job: 'spy' } ]
]
[ 'active', true ]
[ 'employed', true ]

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, null, 2);
console.log(typeof data);
console.log(typeof users);
console.log('------------------');
console.dir(data);
console.log('------------------');
console.dir(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
------------------
'[\n' +
 ' {\n' +
 ' "id": 1,\n' +
 ' "first_name": "Robert",\n' +
 ' "last_name": "Schwartz",\n' +
 ' "email": "rob23@gmail.com"\n' +
 ' },\n' +
 ' {\n' +
 ' "id": 2,\n' +
 ' "first_name": "Lucy",\n' +
 ' "last_name": "Ballmer",\n' +
 ' "email": "lucyb56@gmail.com"\n' +
 ' },\n' +
 ' {\n' +
 ' "id": 3,\n' +
 ' "first_name": "Anna",\n' +
 ' "last_name": "Smith",\n' +
 ' "email": "annasmith23@gmail.com"\n' +
 ' }\n' +
 ']'
------------------
[
 {
 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'
 }
]

Source

JSON.parse - language reference

In this article we have parsed JSON strings into JavaScript objects with the JSON.parse function.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JavaScript tutorials.