Skip to main content

JSON Explained – How to Use JSON with JavaScript

JSON (JavaScript Object Notation) is a text format for interchanging data between clients (web pages) and servers.

In other words, web pages and servers can exchange text data only. Therefore, suppose you wish to send some JavaScript content to a server. In that case, you need to convert the code to a text format (JSON).

Syntax of the JSON Text​

JSON's syntax is similar to the JavaScript object notation. The main difference is that JSON's field name requires double quotes. In contrast, quoting a property's name is not mandatory in JavaScript.

Here's an illustration of a JSON text:

JSON's anatomy

JSON (JavaScript Object Notation) is a text format for interchanging data between web pages and servers.

The JSON text in the image above contains only one property: "isAwesome": true.

note
  • Although JSON's syntax is a subset of JavaScript's object notation, JSON is not JavaScript. It is an entirely language-independent syntax used in virtually all modern programming languages.
  • .json is the file type used for storing JSON text.
  • application/json is JSON's MIME (media) type.

How to Convert a JavaScript Object to JSON​

JavaScript's global JSON object contains a stringify() method for converting a JavaScript object to a JSON text.

info

Converting a JavaScript object to a JSON text is called serialization.

Example: Convert a JavaScript array object to JSON​

// Create a JavaScript array:
const myBio = ["Oluwatobi", "Sofela", "CodeSweetly"];

// Convert myBio array to JSON (text format):
JSON.stringify(myBio);

// The invocation above will return: '["Oluwatobi","Sofela","CodeSweetly"]'

Example: Convert a JavaScript object to JSON​

// Create a JavaScript object:
const myBio = {
  firstName: "Oluwatobi",
  lastName: "Sofela",
  company: "CodeSweetly",
};

// Convert myBio object to JSON (text format):
JSON.stringify(myBio);

// The invocation above will return:
// '{"firstName":"Oluwatobi","lastName":"Sofela","company":"CodeSweetly"}'

Suppose the JavaScript object you wish to convert contains a function. In such a case, JSON.stringify() will remove the function (and its key).

JSON.stringify() removes a JavaScript object's functions because it cannot convert a function to a JSON text.

Example: Convert a JavaScript object containing a function to JSON​

// Create a JavaScript object:
const myBio = {
  firstName: "Oluwatobi",
  lastName: function () {
    return "Sofela";
  },
  company: "CodeSweetly",
};

// Convert myBio object to JSON (text format):
JSON.stringify(myBio);

// The invocation above will return:
// '{"firstName":"Oluwatobi","company":"CodeSweetly"}'

How to prevent JSON.stringify() from removing an object's function​

You can prevent the removal of your object's function by converting it into a string before invoking JSON.stringify().

Here's an example:

// Create a JavaScript object:
const myBio = {
  firstName: "Oluwatobi",
  lastName: function () {
    return "Sofela";
  },
  company: "CodeSweetly",
};

// Convert the lastName function to a string:
myBio.lastName = myBio.lastName.toString();

// Convert myBio object to JSON (text format):
JSON.stringify(myBio);

// The invocation above will return:
// '{"firstName":"Oluwatobi","lastName":"function () {\\n    return \\"Sofela\\";\\n  }","company":"CodeSweetly"}'
note

It is best to avoid functions in JSON because:

  1. A stringed function will lose its scope.
  2. You will need to use the unsafe eval() method to convert a stringed function back to a regular function.

How to Convert a JSON Text to a JavaScript Object​

JavaScript's global JSON object contains a parse() method for converting a JSON text to a JavaScript object.

info

Converting JSON data to a JavaScript object is called deserialization.

Example: Convert a JSON text to a JavaScript object​

// Create a JSON text:
const myBio = '{"firstName":"Oluwatobi","lastName":"Sofela","company":"CodeSweetly"}';

// Convert the myBio JSON text to a JavaScript object:
JSON.parse(myBio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", company: "CodeSweetly" };

Let's see another example.

Example: Convert a JSON text to a JavaScript array​

// Create a JSON text:
const myBio = '["Oluwatobi","Sofela","CodeSweetly"]';

// Convert myBio array to JSON (text format):
JSON.parse(myBio);

// The invocation above will return:
["Oluwatobi", "Sofela", "CodeSweetly"];

Keep in mind that a JSON text is different from a JSON object. Let's discuss their differences.

JSON Text vs. JSON Object: What's the Difference?​

A JSON text is a string format data for transmitting content between clients and servers.

A JSON object is JavaScript's built-in global object containing methods for serialization and deserialization.

You can see the content of JavaScript's JSON object by logging the following code on your browser's console:

console.log(JSON);

Let's discuss the main differences between JSON text and JavaScript objects.

JSON Text vs. JavaScript Object: What's the Difference?​

JSON texts and JavaScript objects are almost identical but have some subtle differences.

1. Quoting in a JSON text vs. JavaScript object​

JSON's keys and strings must be double quoted.

JavaScript's keys can be single quoted, double quoted, unquoted, or numbers.

Additionally, string values in JavaScript can be single quoted.

Here's an example:

// Below is a JSON text containing one key/value pair:
{ "name": "CodeSweetly" }

// Below is a JavaScript object containing one key/value pair:
{ name: 'CodeSweetly' }

JSON permits single quotes only around the entire JSON text like so:

// Below is a JSON text containing one key/value pair:
'{"name": "CodeSweetly"}'

2. Value types permitted in a JSON text vs. JavaScript object​

JSON's values can only be:

note

JSON's values cannot be a function, date, or undefined.

JavaScript object's values can be:

3. Trailing comma in a JSON text vs. JavaScript object​

JSON forbids using trailing commas. However, JavaScript permits it.

Here's an example:

// JSON forbids trailing commas:
const company = { "name": "CodeSweetly" }

// JavaScript allows trailing commas:
const company = { name: 'CodeSweetly', }

Let's now discuss the differences between JSON and XML.

JSON vs. XML: What's the Difference?​

JSON and XML are popular formats for transmitting data between clients (web pages) and servers.

Below are seven key differences between the two data-exchange formats.

  1. JSON is easier to parse. (A standard JavaScript function can parse JSON. However, using an XML parser is required to parse XML.)
  2. It is easy to deserialize JSON to native JavaScript objects. However, you need custom code to deserialize XML.
  3. It is faster and easier to use JSON for AJAX applications.
  4. JSON can use arrays while XML cannot.
  5. Reading and writing JSON is quicker than XML.
  6. JSON is most often shorter than XML.
  7. XML uses end tags while JSON does not.

Here is an example of a JSON code that defines a children object containing an array of four children:

{
  "children": [
    { "name": "Oluwatobi", "bestColor": "Blue" },
    { "name": "Grace", "bestColor": "Pink" },
    { "name": "Mary", "bestColor": "Green" },
    { "name": "Sofela", "bestColor": "White" }
  ]
}

And here is the XML equivalent of the above JSON snippet.

<children>
  <child>
    <name>Oluwatobi</name> <bestColor>Blue</bestColor>
  </child>
  <child>
    <name>Grace</name> <bestColor>Pink</bestColor>
  </child>
  <child>
    <name>Mary</name> <bestColor>Green</bestColor>
  </child>
  <child>
    <name>Sofela</name> <bestColor>White</bestColor>
  </child>
</children>

You can see that the JSON snippet is neater and shorter.

Overview​

This article discussed what JSON is. We also used examples to see how to use it with JavaScript.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article