• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JSON Arrays

← Previous Next →

In the previous tutorials, we explored JSON objects and how they store structured key/value data. Now, we move on to JSON arrays, which are used to store lists of values. Arrays are incredibly useful for representing collections of items like products, users, tasks, or scores in web applications.

What is a JSON Array?

A JSON array is an ordered collection of values enclosed in square brackets [ ].

  • Values can be of any JSON data type: string, number, boolean, object, array, or null.

  • Arrays maintain the order of elements, so you can access them by their index.

Basic Example:

["HTML", "CSS", "JavaScript"]

Here:

  • The array contains three strings.

  • Index positions: 0 → "HTML", 1 → "CSS", 2 → "JavaScript"

JSON Array with Different Data Types

JSON arrays can contain different types of values in the same array:

["Vicky", 28, true, null]

  • "Vicky" → String

  • 28 → Number

  • true → Boolean

  • null → Null

Arrays with mixed types are allowed, but for consistency, most APIs prefer arrays with similar types.

JSON Array of Objects

One of the most powerful features of JSON arrays is that they can contain objects, allowing you to represent lists of complex items.

[
  { "name": "Vicky", "age": 28 },
  { "name": "Sanjana", "age": 26 },
  { "name": "Vrinda", "age": 30 }
]

This array contains three objects, each representing a user with name and age. Arrays of objects are commonly used in APIs for lists of users, products, or tasks.

Creating JSON Arrays in JavaScript

You can create JSON arrays using:

1. Array Literal

let skills = ["HTML", "CSS", "JavaScript"];

2. JSON.parse() on a String

let jsonArray = '["Vicky", "Sanjana", "Amit"]';
let users = JSON.parse(jsonArray);

Both methods result in a JavaScript array you can manipulate.

Accessing JSON Array Elements

You can access array elements using index numbers:

let skills = ["HTML", "CSS", "JavaScript"];
console.log(skills[0]); // Output: HTML
console.log(skills[2]); // Output: JavaScript

  • Arrays in JavaScript are zero-indexed, meaning the first element is at index 0.

  • You can also access nested elements in arrays of objects:

let users = [
  { name: "Vicky", age: 28 },
  { name: "Sanjana", age: 26 }
];

console.log(users[1].name); // Output: Sanjana

Adding and Removing Elements

You can add or remove elements using JavaScript array methods:

Add Elements

let skills = ["HTML", "CSS"];
skills.push("JavaScript"); // Add to end
skills.unshift("Python");  // Add to start
console.log(skills); // ["Python", "HTML", "CSS", "JavaScript"]

Remove Elements

skills.pop();    // Remove last element
skills.shift();  // Remove first element
console.log(skills); // ["HTML", "CSS"]

Iterating Over JSON Arrays

You can loop through JSON arrays using:

1. for Loop

let skills = ["HTML", "CSS", "JavaScript"];
for (let i = 0; i < skills.length; i++) {
  console.log(skills[i]);
}

2. for…of Loop

for (let skill of skills) {
  console.log(skill);
}

3. forEach() Method

skills.forEach(skill => console.log(skill));

These methods are essential for processing arrays from APIs or databases.

Nested Arrays

JSON arrays can contain other arrays, which is useful for tables or multi-dimensional data:

let scores = [
  [88, 92, 79],
  [95, 85, 91]
];

console.log(scores[0][2]); // Output: 79

Here, scores[0] is the first sub-array, and [2] is the third element in that sub-array.

Real-World Example: To-Do List

let todos = [
  { id: 1, task: "Learn JavaScript", done: true },
  { id: 2, task: "Build a website", done: false },
  { id: 3, task: "Read JSON tutorial", done: false }
];

// Print all incomplete tasks
todos.forEach(todo => {
  if (!todo.done) {
    console.log(todo.task);
  }
});

Output:

Build a website
Read JSON tutorial

Arrays of objects like this are extremely common in web development.

Converting Arrays to JSON Strings

To send an array to a server or save it, use JSON.stringify():

let skills = ["HTML", "CSS", "JavaScript"];
let jsonString = JSON.stringify(skills);
console.log(jsonString); // ["HTML","CSS","JavaScript"]

Similarly, you can convert arrays of objects:

let users = [
  { name: "Vicky", age: 28 },
  { name: "Sanjana", age: 26 }
];
console.log(JSON.stringify(users));

Summary of the Tutorial

  • JSON arrays store ordered lists of values inside [ ].

  • Values can be strings, numbers, booleans, objects, arrays, or null.

  • Arrays of objects are commonly used in APIs to represent collections of data.

  • Access elements using index numbers; zero-based indexing is standard.

  • Add, remove, and iterate using standard JavaScript array methods.

  • Nested arrays allow multi-dimensional structures.

  • Use JSON.stringify() to convert arrays for storage or transmission.

Mastering JSON arrays is essential for handling lists of data, iterating through API responses, and managing structured collections in web applications.

Practice Questions

  1. Create a JSON array of strings containing your three favorite programming languages. Print the second language using its index.

  2. Convert this JSON array string into a JavaScript array and print all elements:

'["Vicky","Sanjana","Vrinda"]'

  1. Create a JSON array of numbers [10, 20, 30, 40, 50] and print the sum of all elements using a loop.

  2. Create an array of objects representing three students with name and age. Print the name of the student whose age is 26.

  3. Add a new element "Python" to this array:

let skills = ["HTML", "CSS", "JavaScript"];

  1. Remove the first and last elements from the following array:

let scores = [88, 92, 79, 95, 85];

  1. Loop through this array of objects and print tasks that are not completed:

let todos = [
  { id: 1, task: "Learn JS", done: true },
  { id: 2, task: "Build App", done: false },
  { id: 3, task: "Read JSON", done: false }
];

  1. Create a nested array representing scores of two students and print the second score of the first student:

let scores = [
  [88, 92, 79],
  [95, 85, 91]
];

  1. Convert the following array of objects into a JSON string using JSON.stringify() and print it:

let users = [
  { name: "Vicky", age: 28 },
  { name: "Sanjana", age: 26 }
];

  1. Iterate over this mixed-type array ["Vicky", 28, true, null] and print only the string values.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top