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:
The JSON text in the image above contains only one property: "isAwesome": true
.
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.
Example: Convert a JavaScript array object to JSON
Example: Convert a JavaScript object to JSON
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
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:
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.
Example: Convert a JSON text to a JavaScript object
Let’s see another example.
Example: Convert a JSON text to a JavaScript array
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:
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:
JSON permits single quotes only around the entire JSON text like so:
Use CSS Grid like a pro
2. Value types permitted in a JSON text vs. JavaScript object
JSON’s values can only be:
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:
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.
- JSON is easier to parse. (A standard JavaScript function can parse JSON. However, using an XML parser is required to parse XML.)
- It is easy to deserialize JSON to native JavaScript objects. However, you need custom code to deserialize XML.
- It is faster and easier to use JSON for AJAX applications.
- JSON can use arrays while XML cannot.
- Reading and writing JSON is quicker than XML.
- JSON is most often shorter than XML.
- 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:
And here is the XML equivalent of the above JSON snippet.
You can see that the JSON snippet is neater and shorter.