Last Updated on September 22, 2023 by Mayank Dham
This blog gives you the brief definition of JSON Array and we will study in detail the JSON Array Example. Let’s commence our exploration of JSON Arrays, and by the conclusion of this article, we will delve into comprehensive JSON Array examples, accompanied by thorough explanations.
What is JSON Array?
JavaScript Arrays and JSON Arrays exhibit close similarities. JSON Arrays can store string, array, boolean, integer, object, null, and boolean values, much like their JavaScript counterparts. In JSON arrays, values are segregated by commas. Array elements can be accessed using the [] operator.
JSON arrays come in various formats, and to enhance our understanding, let’s employ examples to elucidate these distinctions.
JSON Array Structure
A comma separates each element in a JSON array, which might have zero, one, or more ordered elements. Square brackets [ enclose the JSON array. A JSON array is zero-ended, with zero as its first index (0). As a result, length – 1 is the array’s last index.
The members of a JSON array can be of different data types, unlike ordinary BDL arrays. For JSON arrays, the following data types are acceptable:
| string | surrounded by quotation marks (" ") |
|---|---|
| number | |
| float | |
| array | JSON array (can be nested) |
| object | JSON object |
| boolean | true or false |
| empty | null |
-
JSON Array of String: Only string elements are contained in the JSON array of Strings. For instance, the array below contains six string items separated by commas: "Ram," "Shyam," "Radhika," "Akshay," "Prashant," and "Varun" (,).
["Ram", "Shyam", "Radhika", "Akshay", "Prashant", "Varun"]JSON Array Example: Here, we’ll give the important students in the jsonStringArray object a JSON Array of Strings. The [] operator is then used to retrieve the array’s first element.
<!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 Example of Numbers: The only components in a JSON array of numbers are numbers. The array below, for instance, consists of 5 elements: 23, 44, 76, 34, and 98.
[23, 44, 76, 34, 98]
JSON Array Example: Here, we provide the key marks in the jsonNumberArray object a JSON Array of Numbers. The [] operator is then used to retrieve the array’s first element.
<!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 a 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 Example of Booleans: Only boolean items are contained in the JSON array of Booleans (either true or false). The array below, for instance, contains 5 entries, each of which is either true or false.
[true, true, true, false, false, true]
JSON Array Example: Here, the key boolean in the jsonBooleanArray object is assigned a JSON Array of Booleans. The [] operator is then used to retrieve the array’s first element.
<!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 a 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 Example of Objects: A JavaScript object and a JSON object are identical. Additionally, we can create a JSON array with numerous JSON objects inside of it, loop over that array, or utilise the [] function to acquire the object we require. Three JSON objects are allocated to the key "books" in the example below array. Each object has the properties "name" and "author."
{ "books":[ {"name":"Let Us C", "author":"Yashavant Kanetkar"}, {"name":"Rich Dad Poor Dad", "author":"Robert Kiyosaki "}, {"name":"Introduction to Algorithms", "author":"Cormen"}, ] }JSON Array Example: Here, we provide the key books in the jsonObjectArray object a JSON Array of Objects. The [] operator is then used to retrieve the array’s first element.
<!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 -
JSON Array Example of Arrays OR JSON Multidimensional Array: Another option is to build a JSON array with items that are themselves other arrays. The JSON array in the example below has the following arrays: ["a", "b", "c"], ["d", "e", "f"], ["g", "h", I The [] operator can be used to get the array at any index and the [] operator can be used once more to get the element of the chosen array.
{ "matrix": [ [ "a", "b", "c" ], [ "d", "e", "f" ], [ "g", "h", "i" ] ], };JSON Array Example: Here, we give the key matrix in the jsonMultiArray object a JSON Array of Arrays. The [] operator is then used to retrieve the array’s first element.
<!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 a matrix(2D array). Then we // accessed the first element of // the first index of the 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
Conclusion
Understanding the structure and usage of JSON arrays is essential for effectively managing and transmitting structured data. JSON arrays allow the grouping of multiple values and data types, making them versatile tools for various programming and data exchange tasks.
FAQs Related to JSON Array
1. What is the JSON Array?
A comma separates each element in a JSON array, which might have zero, one, or more ordered items. Square brackets [] enclose the JSON array. A JSON array is zero ended, with zero as its initial index (0). As a result, length – 1 is the array’s final index.
2. How to create a JSON Array?
By instantiating the JSONArray class, construct a JSON array, and then add elements to the array using the add() function of the JSONArray class.
3. What are JSON Arrays used for?
String, array, boolean, integer, object, or null values can all be stored in a JSON array. Values in a JSON array are separated by commas. The [] operator can be used to access array items. There are several forms of JSON arrays.
4. What does JSON stand for?
JSON Stands for JavaScript Object Notation. A free, machine- and human-readable data transfer format known most frequently by its abbreviation JSON.