JavaScript JSON.parse

last modified February 15, 2021

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.

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'
  }
]

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

List all JavaScript tutorials.