Fetch Analytics Data and Handle UI States

1. Introduction

A dashboard often requests filtered data from a server. The browser should not assume every request succeeds, and the server must still enforce authorization and validate query parameters.

2. Understand the concept

fetch returns a response even for many HTTP error statuses, so check response.ok before parsing success data. Validate the response shape, format numbers with units, and show an empty state separately from an error. Never place API secrets in browser JavaScript.

3. Syntax and interpretation

async function loadSummary() {
  const response = await fetch('/api/summary?region=north');
  if (!response.ok) throw new Error('Unable to load summary');
  return response.json();
}

The function returns structured JSON only after a successful HTTP response. The caller should catch failures and update the interface.

4. Apply it to an analysis

Call an API from JavaScript and display loading, success, empty, and error states honestly. Start with a small, known example and state what each row or value represents. After the transformation, check row counts, types, keys, and units against the original data. If an assumption fails, stop and investigate instead of presenting the output as a valid result.

5. Common mistakes

• Displaying a failed or missing response as zero revenue.
• Trusting a hidden front-end filter as an authorization boundary.

6. Practice task

What should a dashboard show if an API returns valid data but the selected time range has no records?

7. One possible solution

Show a clear empty state such as “No records for this period,” not a network error and not a fabricated zero unless zero is the actual measured result.

8. Summary and next step

Call an API from JavaScript and display loading, success, empty, and error states honestly. Continue to the next course section and apply this foundation to a different analytics tool or workflow.