iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

JSON Arrays

By · Reviewed & last updated · Part of JavaScript Tutorial

JSON arrays look identical to JavaScript arrays. They hold ordered values — mixed types allowed, nesting allowed, no trailing comma.

Valid forms

JSON
[1, 2, 3]
["a", "b", "c"]
[true, false, null]
[
  { "id": 1, "name": "Ada" },
  { "id": 2, "name": "Grace" }
]
[[1, 2], [3, 4], [5, 6]]                  // nested
[]                                        // empty is fine

Parse and use

JS
const text = '[{"id":1,"name":"Ada"},{"id":2,"name":"Grace"}]';
const users = JSON.parse(text);

users.length;             // 2
users[0].name;            // "Ada"
users.map(u => u.id);     // [1, 2]
users.filter(u => u.name.startsWith("A"));

Stringify back

JS
const list = [1, 2, 3];
JSON.stringify(list);                      // "[1,2,3]"
JSON.stringify(list, null, 2);             // pretty-printed

// undefined and functions become null in arrays
JSON.stringify([undefined, () => 1]);      // "[null,null]"

JSON Lines (JSONL) — streaming arrays

Many big-data feeds use JSON Lines: one JSON value per line, no enclosing array. Parses incrementally and handles huge files.

.jsonl
{"id":1,"name":"Ada"}
{"id":2,"name":"Grace"}
{"id":3,"name":"Linus"}
Tip: If a server endpoint can return huge arrays, ask for JSONL instead. You parse one record at a time without holding the whole array in memory.

Example

Example
<!DOCTYPE html>
<html>
<body>

<p id="out"></p>

<script>
document.getElementById("out").textContent = "Hello from JSON Arrays!";
</script>

</body>
</html>
Try it Yourself »

Exercise

Wrap three numbers as a JSON array.

const text = ' 1, 2, 3]';

Test yourself

Q1. Trailing commas in JSON arrays are…
Q2. Nested arrays in JSON are…
Q3. JSON Lines (JSONL) holds…

Discussion

Loading…