JSON Arrays
JSON arrays hold ordered lists of values inside square brackets, and are the standard way JSON represents collections like search results or rows of data.
Arrays of Objects
The most common shape you will see in real APIs is an array of objects: a list where every item shares roughly the same structure. This models tables, feeds, and search results naturally, since each object in the array is one record.
An array of objects
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const employees = [
{ "id": 1, "name": "Tara", "dept": "Engineering" },
{ "id": 2, "name": "Wei", "dept": "Design" },
{ "id": 3, "name": "Omar", "dept": "Sales" }
];
console.log(employees.length); // 3
console.log(employees[0].name); // "Tara"
</script>
</body>
</html>Indexing Into Arrays
Array elements are accessed by a zero-based numeric index using bracket notation. The first element is at index 0, and the last is at index array.length - 1. Accessing an index beyond the array's bounds returns undefined rather than throwing.
Indexing basics
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[colors.length - 1]); // "blue" - last item
console.log(colors[10]); // undefined - out of bounds, no error
</script>
</body>
</html>Looping Over Arrays
Once parsed, JSON arrays become real JavaScript arrays with the full range of array methods. for...of is the clearest way to loop when you just need each value; forEach() works similarly with a callback; and map() is the standard tool for transforming every item into a new array.
Three ways to loop
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const tasks = [
{ "title": "Write report", "done": false },
{ "title": "Review PR", "done": true }
];
// for...of
for (const task of tasks) {
console.log(task.title);
}
// forEach
tasks.forEach((task, index) => {
console.log(`${index}: ${task.title}`);
});
// map - build a new array of just the titles
const titles = tasks.map(task => task.title);
console.log(titles); // ["Write report", "Review PR"]
</script>
</body>
</html>- Arrays preserve insertion order - JSON guarantees this, unlike object keys in some implementations
- Use .length to get item count, and .map()/.filter()/.find() for transformations
- Nested arrays and objects can mix freely, e.g. an object containing an array of objects containing arrays
- JSON.parse() turns a JSON array string into a real, fully-featured JavaScript array
Filtering and Finding
Beyond simple loops, filter() returns a new array containing only the items that pass a test, and find() returns the first matching item (or undefined if none match). These are essential when working with arrays of JSON objects pulled from an API response.
filter and find
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const products = [
{ "name": "Keyboard", "price": 45, "inStock": true },
{ "name": "Monitor", "price": 210, "inStock": false },
{ "name": "Webcam", "price": 60, "inStock": true }
];
const available = products.filter(p => p.inStock);
console.log(available.length); // 2
const expensive = products.find(p => p.price > 200);
console.log(expensive.name); // "Monitor"
</script>
</body>
</html>Exercise: JSON Arrays
How is a JSON array delimited?
