This blog gives you the brief definition of JSON Array and we will study in detail the JSON Array Example. Now let’s start with JSON Array and By the end of this article we will study JSON Array examples with full details and explanation.
What is JSON Array?
JavaScript Array and JSON Array are nearly the same. String, array, boolean, integer, object, null, and boolean values can all be stored in JSON arrays. Values are separated by commas in the JSON array. The [] operator can be used to access array elements.
There are various forms of JSON arrays. Let’s use examples to better comprehend them.
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
In this article, we have studied about the JSON Array Examples and proceeded with the help of codes and explanations. We hope you will understand this concept very well and all your doubts are cleared.
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.