Why my array is empty — and why there's no error

A painfully familiar symptom: the screen is blank, the data is definitely in the database, and the console says []. And nothing else. No red line, no warning. Silence.

Here's the key thing to understand: that's not an error, it's an answer. The code ran flawlessly and honestly reported zero matching records. Nothing crashed because nothing was broken. There are exactly three causes, and the first is more common than the other two combined.

Cause 1. The data hasn't arrived yet

The most common one. A server request is async: the page renders instantly, the answer lands a fraction of a second later. In that gap the array really is empty — the data physically isn't there yet.

How to check. Put a log right before the place where you read the list:

console.log("items:", items.length, items)

Open your logs. If the line printed twice — first 0, then 12 — diagnosis complete: the data does arrive, just later than you look at it. A single lonely 0 means the problem is elsewhere; go to cause 2.

How to fix it. Don't draw conclusions on the first pass. Keep a separate loading state and show a spinner until the answer lands; only print "nothing found" once you actually have a response. If you're building the list in a loop of requests, make sure each one is awaited rather than fired off in a batch while you race ahead.

A practical prompt that closes this off immediately: "add three states — loading, empty list, list with data". AI almost always writes only the third.

Cause 2. A filter cut everything away

The data arrived but never reached the screen: the condition matched zero times. It looks identical — [], no errors.

The classic culprit is types. A string and a number aren't equal under strict comparison:

"5" === 5      // false
items.filter(i => i.categoryId === selectedId)

If selectedId came from the address bar or a form field, it's a string, while the data holds a number. Zero matches. Its relatives live nearby: a stray space in a value, and mismatched case — "Almaty" and "almaty" are two different cities as far as the code is concerned.

How to check. Switch the filter off temporarily and look at the length. Data came back? It's the filter. Then print both values along with their types:

console.log(typeof i.categoryId, i.categoryId, typeof selectedId, selectedId)

Two different types on one line are impossible to miss.

How to fix it. Convert to one type before comparing (Number(selectedId)), and text to one case with the edges trimmed (value.trim().toLowerCase()). Comparing things "as they come" is only safe inside your own data, where you control the format.

Cause 3. The list sits deeper than you're looking

The server response arrived in full, but the list inside it isn't at the top level. Almost every API wraps its data:

{ "data": { "items": [ ... ], "total": 42 } }

You read response.data while the list lives in response.data.items. Result: empty, and again no error, because reading a missing field in JavaScript simply gives you undefined.

How to check. Print the whole response without picking it apart on the way: console.log(JSON.stringify(response, null, 2)). Look with your eyes for where the square brackets start — that's your array.

How to fix it. Take the correct path to the list. And for the future, get in the habit of reading the raw response first, before any processing. If the log shows nothing at all instead of a structure, you're probably facing the neighbouring problem: fetch returned undefined — there the request never landed, while here it did and you're just reading the wrong key.

The order of moves, if you can't be bothered

Three logs at three points, top to bottom — the raw response, the list right after parsing, the list after filtering. The spot where the length turns into zero is your cause. A minute of work and there's nothing left to guess.

Why is there no error if there's no data?

Because "zero records" is a legitimate result. An empty search, a new user with no orders, a clean chat — in every case the code should show an empty screen, not fall over. Expect an error only when the request itself broke.

Is the array empty, or is it undefined?

Those are different diagnoses with different checks. [] in the log means "the list exists and holds zero items" — work through the three causes above. undefined means there's no list at all: the variable never filled, the key is named differently, or the request never landed.