JavaScript

JSON Array Literals | Explained

A list of expressions representing array elements specified in a pair of square brackets is called JSON array literal. When you create an array by utilizing a JSON array literal, the values of the JSON array literal are added as array elements, and its length is set according to the number of passed arguments.

This write-up will explain JSON array literal and its usage with the help of appropriate examples. So, let’s start!

What is JSON Array Literal?

An array inside a JSON string is known as an array literal. It is the same as arrays in JavaScript however it can only contain numbers, strings, booleans, arrays, objects, and null values except functions, expressions, dates, and undefined like arrays.

A JSON string:

jsonString = '["Apple", "Mango", "Orange"]';

An array literal in JSON string:

myArray = ["Apple", "Mango", "Orange"];

Creating a JSON string from an array

JavaScript permits you to create a JSON string from an array. For this purpose, you have to declare a JavaScript array and then stringify the array to create a JSON string.

Example: How to create a JSON string from an array
In the below-given example, we will create an array named “myArray” having three string values “Apple”, “Mango”, and “Orange”:

const myArray = ["Apple", "Mango", "Orange"];
console.log(myArray);

You can utilize any online coding sandbox or your favorite code editor for executing the provided JavaScript program; however, we will use the Visual Studio Code:

After adding the code in our “index.html”, we will execute it with the “Liver Server” VS Code extension:

The output shows the elements of our JavaScript “myArray”:

Now, to convert the array into the JSON string, JSON.stringify() method will be used as shown in the code snippet provided below:

let arrayLiteral = JSON.stringify(myArray);

Let’s show the “arrayLiteral” in the console along with its variable type using the typeof() method to verify whether the array is converted into string format or not.

console.log(arrayLiteral);
console.log(typeof(arrayLiteral));

The complete code snippet would go like this:

const myArray = ["Apple", "Mango", "Orange"];
console.log(myArray);
console.log(typeof(myArray));
let arrayLiteral = JSON.stringify(myArray);
console.log(arrayLiteral);
console.log(typeof(arrayLiteral));

The output of the above code snippet in the console will be:

The output verifies that the array is stringified successfully.

Note: The variable type of array is “Object” in javaScript. For further details, read our dedicated article’s section on arrays.

Creating an array by parsing JSON string

Another method for creating a JavaScript array is to parse a JSON string and store its result in it. In this case, you have to utilize the “JSON.parse()” method for parsing the added JSON string into the required data type.

Example: How to create an array by parsing JSON string
First of all, we will define a “myJSON” string having the following three values:

const myJSON = '["Cat", "Rabbit", "Pigeon"]';

In the next step, we will parse the “myJSON” string by invoking the “JSON.parse()” method. The values returned by the specified method will be stored in “myArray”:

Execute the above-given program, and check out its output:

After parsing the JSON string into an array, you can also access an array element by using its index. For instance, if we want to get the first Element of “myArray“, then we will add the following line in our JavaScript program:

console.log(myArray[1]);

The output will display “Rabbit” as it is the element that is present at the first index of “myArray”:

Looping through the JSON array literal

If you want to loop through the values of JSON array literal, then the first thing you have to do is convert the JSON string into an array and use “for..in” or “for” JavaScript loops for the iteration.

Example: How to loop through the JSON array literal using for..in loop
In this example, we will utilize the “for..in” loop for looping through the added JSON array literal. But before, that we will parse our “myJSON” string into “myObj” with the help of the “JSON.parse()” method:

const myJSON = '{"name":"Alex", "age":25, "hobbies":["Painting", "Gardening", "Gaming"]}';
const myObj = JSON.parse(myJSON);

Next, we will declare an empty string “info”. After doing so, we will loop through the parse JSON array literal by adding a “for..in” loop. The result of each iteration will be appended to “info”:

let info = "";
for (let i in myObj.hobbies) {
    info += myObj.hobbies[i] + ", ";
}
console.log(info);

Example: Looping through the JSON array literal using for loop
In case of using “for” loop, you have to add the following code in your “index.html” file:

for (let i = 0; i < myObj.hobbies.length; i++) {
    info += myObj.hobbies[i] + ", ";
}
console.log(info);

The above-given output signifies that we have successfully looped through the JSON array literal with the “for” loop.

Conclusion

Each JSON string has a JSON array literal which comprises some values. The values added in the JSON string literal can be number, string, boolean, or null. The JSON array literal values must be enclosed in square brackets [] and separated with a comma. This write-up explained the JSON array literals and their usage in detail with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.