How To Parse JSON with JSON.parse() JavaScript Function?

JSON is a very popular data format that is mainly used in web applications in order to transmit data in a common format. JSON is an ASCII or non-binary format which is human readable. JavaScript generally used to create, use, consume JSON type data. JSON.parse() is a function that is used to parse JSON structured data.

Example JSON Data

During the JSON parse tutorial, we will use the following example JSON data which contains different types like string, integer, date, array, etc.

{
   "firstName":"Ahmet",
   "lastName":"Baydan",
   "age":7,
   "birth":"2012-01-01",
   "address":{
      "streetAddress":"21 2nd Street",
      "city":"Ankara",
      "state":"Ankara",
      "postalCode":6543
   },
   "phoneNumbers":[
      {
         "type":"home",
         "number":"212 555-1234"
      },
      {
         "type":"fax",
         "number":"646 555-4567"
      }
   ]
}

JSON.parse() Function Syntax

parse() function is provided by JSON library in order to parse JSON data format. There are two parameters where one is optional.

JSON.parse(text[, reviver])

• text is the data the function will parse which is in JSON format.
• reviver is optional parameters where If a function, this prescribes how the value originally produced by parsing is transformed, before being returned.

This function will return an Object corresponding to the given JSON text. If the format of the given text does not comply with the JSON format specification the SyntaxError exception will be thrown.

Parse JSON

We can parse simply provided JSON data with the JSON.parse() function. We will provide the data which is held by the variable named person like below. In this example, we will print parsed variables named firstName, lastName, age.

var person = '{"firstName":"Ahmet","lastName":"Baydan","age":7,"birth":"2012-01-01"}';

obj = JSON.parse(person);

console.log(obj.firstName);
// Output "Ahmet"

console.log(obj.lastName);
// Output "Baydan"

console.log(obj.age);
// Output "7"

Parse JSON Array

We can also parse a JSON array with the parse() function. In this example, we will use an array named names. We will parse the names array and use in JavaScript.

var person = '{"names":[{"name":"Ahmet"},{"name":"Ali"},{"name":"İsmail"}]}';

obj = JSON.parse(person);

console.log(obj.names[0].name);
// Output "Ahmet"

console.log(obj.names[1].name);
// Output "Ali"

console.log(obj.names[2].name);
// Output "İsmail"

Parse Date Data with JSON

The date is the special type where we have to use it especially by creating reviver function which will handle data values with Date type in JavaScript programming language. We will create a function that will handle the birth key specially and convert the JSON date data in JavaScript Date type or format like below.

var text = '{"name":"Ahmet", "birth":"2013-12-14", "city":"Ankara"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

console.log(obj.birth);
// Output "Sat Dec 14 2013 02:00:00 GMT+0200 (GMT+03:00)"

Parse Function with JSON

As JavaScript is an interpreted language we can create and run functions is different ways. We can also represent functions in JSON data and run these functions after parsing them. In this example, we will store the function with the key value hello and run after parsing it.

var text = '{"name":"Ahmet", "age":"function(){return 10;}", "city":"Ankara"}';
var obj = JSON.parse(text);

obj.age = eval("(" + obj.age + ")");

console.log(obj.age());
// Output "Output 10"