JSON.parse(str)

will not convert date string to date object and we get an error

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str);

document.write( meetup.date.getDate() ); // Error!

The value of

meetup.date

is a string, not a

Date

object. That is why

JSON.parse

was unable to transform that string into a

Date

object. ... Passing the reviving function to

JSON.parse

as the second argument fixes the issue. The reviving function returns all values “as is”, but

date

will become a

Date

object and the error will not occur

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // now works!

We can convert the object into JSON, and send the data to a server as a value of

x

variable (but it's not ideal way of sending JSON to a server)

var myObj = {name: "John", age: 31, city: "New York"};
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

Store and retrieve data from local storage

let myObj, myJSON, text, obj;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name + ' is ' + obj.age;

JSON names require double quotes. JavaScript names don't. JSON

{ "name": "John" }

In JavaScript we can have names without quotes:

{ name: "John" }

In JavaScript, keys can be strings, numbers, or identifier names:

{ 12: "John" }

In

JSON

, values must be one of the following data types:

- a string
- a number
- an object (JSON object)
- an array
- a boolean
- null

In

JavaScript

, values can be all of the above listed types, plus any other valid JavaScript expression, including:

- a function
- a date
- a symbol
- undefined

In

JSON

, string values must be written with double quotes:

{ "name":"John" }

In

JavaScript

, we can write string values with double or single quotes:

{ name: 'John' }

We can request JSON (

derived from an object

) from the server by using an XMLHttpRequest request As long as the response from the server is written in JSON format, we can parse the JSON data into a JavaScript object

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

When we use JSON.parse() on a JSON

derived from an array

, the method will return a JavaScript array, instead of an object

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myArr[0];
  }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Date type is not allowed in JSON. If we need to have a date, we have to include it as a string and then we can convert it back to date object later

var text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';

var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.write(obj.name + ", " + obj.birth)

Also we can use the second parameter of the

JSON.parse()

function, called

reviver

that checks each property, before returning the value

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';

var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

document.write(obj.name + ", " + obj.birth)

Function is not allowed in JSON. If we need to have a function in JSON, we have to include it as a string. Later, we can convert it back into a function

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

The

JSON.stringify()

will remove functions from a JavaScript object because

function

is not valid data type in

JSON

var obj = { name: "John", age: function () {return 30;}, city: "New York" };

// Functions and any other unsupported data types will be ignored
var myJSON = JSON.stringify(obj);
document.write(myJSON);

The result will be:

{"name":"John","city":"New York"}

As we can see, the

function

is removed. To solve this issue we can convert the function into

string

before running

stringify

var obj = { name: "John", age: function () {return 30;}, city: "New York" };
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.write(myJSON);

The result will be:

{"name":"John","age":"function () {return 30;}","city":"New York"}

In JSON: Array values must be of type

string

,

number

,

object

,

array

,

boolean

or

null

... In JavaScript: Array values can be all of the above, plus any other valid JavaScript expression, including

functions

,

dates

,

undefined

,

symbol