Show missing API values without turning them into zero

Your hackathon dashboard displays 0% when the API has not supplied a reading. The screen looks complete, but it now says something the data never said. Keep a real zero visible and label a missing reading as missing.

This is a small issue to fix before the demo because an audience cannot tell whether 0% means “the device reported zero” or “the frontend filled a gap.” Agree on that difference with the teammate returning the response.

Define what each value means

Consider a fictional sensor dashboard with a battery percentage. In this example, a number from 0 to 100 is a reading. null or an omitted value means no reading was supplied. A string, a negative number or an infinite number is invalid data.

Those are our example’s rules, not universal rules for every API. Some services send numeric strings. Others use a separate status field. Adapt the boundary to the actual contract instead of guessing what a value probably means.

JavaScript’s || operator uses its fallback for falsy values, which includes zero. ?? uses its fallback only for null and undefined. The distinction matters, but value ?? 0 would still invent a zero for a missing reading. MDN’s nullish coalescing reference.

Make the display decision explicit

Save this dependency-free example as percent.mjs. It returns text and a state so the interface can distinguish a measurement from an explanation.

export function presentPercent(value) {
  if (value === null || value === undefined) {
    return { text: "Not provided", state: "missing" };
  }
  if (!Number.isFinite(value) || value < 0 || value > 100) {
    throw new RangeError("Expected a percentage from 0 to 100");
  }
  return { text: `${value}%`, state: "reading" };
}

Number.isFinite checks for an actual finite number without converting a string into one. The range checks then apply the percentage rule we chose. MDN’s Number.isFinite reference.

At the response boundary, catch invalid-data failures and show an honest error state. Do not catch them and return 0%. A missing field and a failed request also need separate messages: “Not provided” describes a successful response without a reading; “Could not load the reading” describes a request failure.

Check the cases a polished screenshot hides

Save this beside the helper as check-percent.mjs, then run node check-percent.mjs. These assertions check real zero, both missing forms and inputs that must not look like valid readings.

import assert from "node:assert/strict";
import { presentPercent } from "./percent.mjs";

assert.deepEqual(presentPercent(0), { text: "0%", state: "reading" });
assert.deepEqual(presentPercent(72), { text: "72%", state: "reading" });
assert.deepEqual(presentPercent(100), { text: "100%", state: "reading" });
for (const value of [null, undefined]) {
  assert.deepEqual(presentPercent(value), {
    text: "Not provided", state: "missing"
  });
}
for (const value of ["0", -1, 101, NaN, Infinity]) {
  assert.throws(() => presentPercent(value), RangeError);
}
console.log("Percentage boundary checks passed");

The helper and these checks were run locally. They verify this display boundary, not a complete dashboard or its network behavior.

When wiring the interface, try the same values through a fixture response. Keep the explanatory text visible; color alone cannot tell a viewer why a number is absent. Check a slow response as well, so an old reading is not presented as the newly loaded result without a label.

For the demo, use clearly identified sample data if a device is unavailable. A sample value can demonstrate the interface. It cannot prove the device supplied that value.

Stavleak produces hackathons for organizations and provides the event workspace. Find an event in the hackathon catalogue, or use the organizer toolkit to make demo expectations clear to participants.

An autonomous AI agent drafted this article, generated the cover and checked the code. The sensor example and image are conceptual. No customer results or device performance figures are claimed.