JSON Array is almost the 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 the jsonStringArray object. Then we access the first element of an array using the [ ] operator.
HTML <!DOCTYPE html> <html> <head> <title>JSON Array</title> </head> <body> <p id="para"></p> <script> let 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. let 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> <head> <title>JSON Array</title> </head> <body> <p id="para"></p> <script> let 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. let 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> <head> <title>JSON Array</title> </head> <body> <p id="para"></p> <script> let 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. let 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> <head> <title>JSON Array</title> </head> <body> <p id="para"></p> <script> let 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 let 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 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> <head> <title>JSON Array</title> </head> <body> <p id="para"></p> <script> let 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. let 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
Similar Reads
What is JSON?
JSON (JavaScript Object Notation) is a lightweight text-based format for storing and exchanging data. It is easy to read, write, and widely used for communication between a server and a client. Key points:JSON stores data in key-value pairs.It is language-independent but derived from JavaScript synt
3 min read
What is JSON text ?
JSON text refers to a lightweight, human-readable format for structuring data using key-value pairs and arrays. It is widely used for data interchange between systems, making it ideal for APIs, configuration files, and real-time communication. In today’s interconnected digital world, data flows seam
4 min read
What is JSON-Java (org.json)?
JSON(Javascript Object Notation) is a lightweight format of data exchange and it is independent of language. It is easily read and interpreted by humans and machines. Hence nowadays, everywhere JSON is getting used for transmitting data. Let us see how to prepare JSON data by using JSON.org JSON API
5 min read
How to Encode Array in JSON PHP ?
Encoding arrays into JSON format is a common task in PHP, especially when building APIs or handling AJAX requests. Below are the approaches to encode arrays into JSON using PHP: Table of Content Using json_encode()Encoding Associative ArraysCustom JSON SerializationUsing json_encode()PHP provides a
2 min read
PHP array() Function
The array() function is an inbuilt function in PHP which is used to create an array. There are three types of array in PHP: Indexed array: The array which contains numeric index. Syntax: array( val1, val2, val3, ... ) Associative array: The array which contains name as keys. Syntax: array( key=>v
2 min read
JavaScript | JSON Arrays
The JSON Arrays is similar to JavaScript Arrays. Syntax of Arrays in JSON Objects: // JSON Arrays Syntax { "name":"Peter parker", "heroName": "Spiderman", "friends" : ["Deadpool", "Hulk", "Wolverine"] } Accessing Array Values: The Array values can be accessed using the index of each element in an Ar
2 min read
What is JSONB in PostgreSQL?
PostgreSQL is a powerful object-relational database management system that excels at handling structured and semi-structured data, especially through its support for JSONB. JSONB (Binary JSON) allows efficient storage and querying of JSON data and making it ideal for applications that require quick
5 min read
Loop through a JSON array in Python
A JSON array is an ordered list of values that can store multiple values such as string, number, boolean, or object. The values in a JSON array must be separated by commas and enclosed in squares in brackets []. In this article, we will learn how we can loop through a JSON array in Python. Iterate o
4 min read
PHP Arrays
Arrays are one of the most important data structures in PHP. They allow you to store multiple values in a single variable. PHP arrays can hold values of different types, such as strings, numbers, or even other arrays. Understanding how to use arrays in PHP is important for working with data efficien
5 min read
JavaScript Array Exercise
In JavaScript, an Array is a versatile data structure that allows you to store multiple values in a single variable. Arrays can hold different data types, including strings, numbers, objects, and even other arrays. JavaScript arrays are dynamic, which means they can grow or shrink in size. [GFGTABS]
1 min read