JSON Array is almost same as JavaScript Array. JSON array can store values of type string, array, boolean, number, object, or null. In JSON array, values are separated by commas. Array elements can be accessed using the [] operator.
JSON Array is of different types. Let’s understand them with the help of examples.
JSON Array of String: JSON array of Strings contains string elements only. For example, the array below has 6 string elements, “Ram”, “Shyam”, “Radhika”, “Akshay”, “Prashant” and “Varun”, each element is separated with a comma (,).
["Ram", "Shyam", "Radhika", "Akshay", "Prashant", "Varun"]
Example: Here we will assign a JSON Array of Strings to the key students in jsonStringArray object. Then we access the first element of array using the [ ] operator.
HTML
<!DOCTYPE html><html> <body> <p id="para"></p> <script> var jsonStringArray = { // Assigned a JSON array of strings // to the key "students". "students": ["Ram", "Shyam", "Radhika", "Akshay", "Prashant", "Varun"], }; // It returned an array. Then we accessed // the first index of the array // (which is "Ram") using [] syntax. var x = jsonStringArray.students[0]; // Set the inner HTML of "para" paragraph // to the value of variable "x". document.getElementById("para").innerHTML = x; </script></body> </html> |
Output:
Ram
JSON Array of Numbers: JSON array of Numbers contains number elements only. For example the array below has 5 elements, 23, 44, 76, 34, 98.
[23, 44, 76, 34, 98]
Example: Here we assign a JSON Array of Numbers to the key marks in jsonNumberArray object. Then we access the first element of array using [ ] operator.
HTML
<!DOCTYPE html><html> <body> <p id="para"></p> <script> var jsonNumberArray = { // Assigned a JSON array of numbers // to the key "marks". "marks": [23, 44, 76, 34, 98], }; // It returned an number array. // Then we accessed the first // index of the array // (which is 23) using [] syntax. var x = jsonNumberArray.marks[0]; // Set the inner HTML of "para" paragraph // to the value of variable "x". document.getElementById("para").innerHTML = x; </script></body> </html> |
Output:
23
JSON Array of Booleans: JSON array of Booleans contains boolean elements only (either true or false). For example, the array below has 5 elements in it each one of that is either true or false.
[true, true, true, false, false, true]
Example: Here we assign a JSON Array of Booleans to the key boolean in jsonBooleanArray object. Then we access the first element of array using [ ] operator.
HTML
<!DOCTYPE html><html><body> <p id="para"></p> <script> var jsonBooleanArray = { // Assigned a JSON array of boolean // to the key "booleans". "booleans": [true, true, true, false, false, true], }; // Here we accessed the booleans property // of jsonBooleanArray Object. // It returned an boolean array. Then we accessed the // first index of the array // (which is true) using [] syntax. var x = jsonBooleanArray.booleans[0]; // Set the inner HTML of "para" paragraph // to the value of variable "x". document.getElementById("para").innerHTML = x; </script></body> </html> |
Output:
true
JSON Array of Objects: A JSON object is same as JavaScript object. We can also create a JSON Array containing many JSON objects in it, then we can iterate over that array or use the [ ] to get the object we need. In the example below, there are three JSON objects in the array assigned to key “books”. Each object has “name” and “author” property.
{
"books":[
{"name":"Let Us C", "author":"Yashavant Kanetkar"},
{"name":"Rich Dad Poor Dad", "author":"Robert Kiyosaki "},
{"name":"Introduction to Algorithms", "author":"Cormen"},
]
}
Example: Here we assign a JSON Array of Objects to the key books in jsonObjectArray object. Then we access the first element of array using [ ] operator.
HTML
<!DOCTYPE html><html><body> <p id="para"></p> <script> var jsonObjectArray = { // Assigned a JSON array of objects // to the key "books" "books": [ { "name": "Let Us C", "author": "Yashavant Kanetkar" }, { "name": "Rich Dad Poor Dad", "author": "Robert Kiyosaki " }, { "name": "Introduction to Algorithms", "author": "Cormen" }, ] }; // Here we accessed the books property of // jsonObjectArray Object. // It returned an object array. Then we // accessed the first index of the array // (which is an JSON object) using [] syntax var x = jsonObjectArray.books[0]; // Set the inner HTML of "para" paragraph // to the value of variable "x". document.getElementById("para").innerHTML = x.name + " by " + x.author; </script></body></html> |
Output:
Let Us C by Yashavant Kanetkar
5. JSON Array of Arrays OR JSON Multidimensional Array: It is also possible to create a JSON array containing other arrays as elements in it. In the example below we have a JSON array which contains arrays [“a”, “b”, “c”], [“d”, “e”, “f”], [“g” , “h”, “i”] in it. We can use [ ] operator to get the array at any index and use the [ ] operator again to get the element of the selected array.
{
"matrix": [
[ "a", "b", "c" ],
[ "d", "e", "f" ],
[ "g", "h", "i" ]
],
};
Example: Here we assign a JSON Array of Arrays to the key matrix in jsonMultiArray object. Then we access the first element of array using [ ] operator.
HTML
<!DOCTYPE html><html><body> <p id="para"></p> <script> var jsonMultiArray = { // Assigned a JSON array of // Arrays to the key "matrix". "matrix": [ ["a", "b", "c"], ["d", "e", "f"], ["g", "h", "i"] ], }; // Here we accessed the matrix property // of jsonMultiArray Object. // It returned an matrix(2D array). Then we // accessed the first element of // the first index of matrix using [] syntax. var x = jsonMultiArray.matrix[0][0]; // Set the inner HTML of "para" paragraph // to the value of variable "x". document.getElementById("para").innerHTML = x; </script></body></html> |
Output:
a
