Now, let us take a look at a more complex example of JSON. We'll also go over all the datatypes that are supported by JSON. JSON supports six data types: strings, numbers, Booleans, arrays, objects, and null:
{
"studentid" : 101,
"firstname" : "John",
"lastname" : "Doe",
"isStudent" : true,
"scores" : [40, 50],
"courses" : {
"major" : "Finance",
"minor" : "Marketing"
}
}In the preceding example, we have key-value pairs of different data types. Now let us take a close look at each of these key-value pairs.
The datatype of the value that "studentid" references is a number:
"studentid" : 101,
The datatype of the value that "firstname" references is a string:
"firstname" : "John",
In the following snippet, the datatype of the value that "isStudent" references is a Boolean:
"isStudent" : true,
The datatype of the value that "scores" references here is an array:
"scores" : [40, 50]
The datatype of the value that "courses" references is an object:
"courses" : {
"major" : "Finance",
"minor" : "Marketing"
}We know that JSON supports six datatypes; they are strings, numbers, Booleans, arrays, objects, and null. Yes, JSON supports null data, and real-time business implementations need accurate information. There might be cases where null was substituted with an empty string, but that is inaccurate. Let us take a quick look at the following example:
let nullVal = ""; alert(typeof nullVal); //prints string nullVal = null; alert(typeof nullVal); //prints object
In the preceding example, we are performing some simple operations such as determining the type of an empty string. We are using the typeof operator that takes an operand and returns the datatype of that operand, while on the next line we are determining the type of a null value.
Now, let us implement our JSON object in a page and retrieve the values, as shown in the following snippet:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
let complexJson = {
"studentid" : 101,
"firstname" : "John",
"lastname" : "Doe",
"isStudent" : true,
"scores" : [40, 50],
"courses" : {
"major" : "Finance",
"minor" : "Marketing"
}
};
</script>
</head>
<body>
<h2>Complex Data in JSON</h2>
<p>This is a test program to load complex json data into a variable</p>
</body>
</html>To retrieve the id from the variable complexJson, we need to do the following:
alert(complexJson.studentid); //101
To retrieve the name from the variable complexJson, look at the following snippet:
alert(complexJson.firstname); //John
Look at the following code to retrieveisStudent from the variable complexJson:
alert(complexJson.isStudent); //true
Retrieving data from arrays and objects gets a little tricky, as we have to traverse through the array or object. Let us see how values can be retrieved from arrays:
alert(complexJson.scores[1]); //50
In the preceding example, we are retrieving the second element (with index 1, as the array starts from 0) from the scores array. Although scores is an array inside the complexJson object, it is still treated as a regular key-value pair. It is handled differently when the key is accessed; the first thing that the interpreter has to assess when a key is accessed is how to get the datatype of its value. If the retrieved value is a string, number, Boolean, or null, there will be no extra operations performed on the value. But if it is an array or an object, the value's dependencies are taken into consideration.
To retrieve an element from the object inside JSON object, we will have to access the key that is the reference for that value, as shown:
alert(complexJson.courses.major); //Finance
Since objects do not have a numeric index, JavaScript might rearrange the order of items inside an object. If you notice that the order of key-value pairs during the initialization of the JSON object is different from when you are accessing the data, there is nothing to worry about. There is no loss of data; the JavaScript engine has just reordered your object.