JSON Array Literals

JSON Arrays in JavaScript

JSON arrays are ordered lists of values represented in JavaScript Object Notation. They provide a way to store multiple items, such as numbers, strings, objects, or even other arrays, in a single, easily accessible structure. To master JSON arrays in JavaScript, you must understand how to create, access, and manipulate arrays in JSON.

What are JSON Array Literals?

A JSON array literal follows the JSON syntax rules:

• An array is an ordered collection of values.
• Arrays are enclosed in square brackets [ ].
• Values are separated by commas ,.
• Values can be any of the six valid JSON data types.
• Arrays can contain mixed types, including nested arrays and objects.
• Whitespace is ignored, so you can format arrays for readability.
• Trailing commas are not allowed in JSON arrays.

["apple", "banana", "cherry", 42, true, null]

A JSON array can contain six types of values, each representing a valid JSON data type:

1. string
2. number
3. object
4. array
5. boolean
6. null

Nested Arrays

JSON arrays can contain other arrays, creating multidimensional structures:

// A JSON array with nested arrays
const students = [
  ["Alice", 85, ["Math", "Science"]],
  ["Bob", 90, ["English", "History"]],
  ["Carol", 78, ["Biology", "Chemistry"]]
];

Array of Objects

JSON arrays often hold multiple objects, making them ideal for lists of records or API responses, where each object follows the standard structure of a JSON object.

const users = [
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" },
  { "id": 3, "name": "Carol" }
];

Accessing JSON Array Values

After creating a JavaScript array or parsing a JSON array string, you can access its values using these methods:

Accessing Methods

1. Indexing with brackets: jsArray[0]
2. Destructuring assignment: const [a, b] = jsArray;

You can also refer to specific values using standard index-based expressions:

• array[0] returns the first element.
• array[index] returns the element at that position.
• Negative indexes are not supported in JSON; use array[array.length - 1] to get the last element.

Access JSON Array Elements with Index

const fruits = ["apple", "banana", "cherry"];

// Accessing Array items
console.log("first   →", fruits[0]);
console.log("second  →", fruits[1]);
console.log("third   →", fruits[2]);

Accessing Last Array Item

To get the last item in a JSON array, use array[array.length - 1].

const fruits = ["apple", "banana", "cherry"];
const vegetables = ["carrot", "potato", "spinach"];

// Accessing last items
console.log("last fruit      →", fruits[fruits.length - 1]);
console.log("last vegetable  →", vegetables[vegetables.length - 1]);

Accessing Array Values with Destructuring

JavaScript supports destructuring, which lets you extract values from arrays into variables in a clean and readable way.

const languages = ["JavaScript", "Python", "Go"];

// Destructuring the first two items
const [js, py, go] = languages;

console.log("first  →", js);
console.log("second →", py);
console.log("third →", go);

Looping Through JSON Arrays

Iterate over an array of JSON values to process or display each item:

• Use for loops for classic iteration.
• Use for...of for concise looping over values.
• Use Array.prototype.forEach() for callback-based iteration.

const users = '["Bob", "Alice", "John"]';
const userArray = JSON.parse(users);
let output = '';
// Loop using classic for
for (let i = 0; i < userArray.length; i++) {
	output += userArray[i] + '\n';
}

const users = '["Bob", "Alice", "John"]';
const userArray = JSON.parse(users);
let output = '';
// Loop using for...of
for (const user of userArray) {
	output += `<p>${user}</p>`;
}

const users = '["Bob", "Alice", "John"]';
const userArray = JSON.parse(users);
let output = '';
// Loop using forEach method
Array.prototype.forEach.call(userArray, function(user) {
	output += user + '\n';
});

Parsing JSON Arrays

Use the JSON.parse() method to convert a JSON array string into a JavaScript array:

const userData = '["Bob", "Alice", "John"]';
const users = JSON.parse(userData);

Stringifying JavaScript Arrays

Use the JSON.stringify() method to serialize or convert a JavaScript array into a JSON array string:

const users = ["Bob", "Alice", "John"];
const jsonString = JSON.stringify(users, null, 2);

The space parameter adds indentation for readability.

JS Array Method Reference

For a complete overview of all JavaScript array methods, visit the JavaScript Array Reference.