Network Data

Fetch JSON Profile

API Data Becomes UI State

A browser module fetches JSON profile data, parses it, and then maps the response into a visible profile card.

Program

The source waits for network data first. The rendered profile changes only after the parsed JSON is written into DOM attributes and text.

No network value is invented here; the figure shows the fixed state order.Request, data, renderPinned replay for fetch_json_profile.jsEach visible change waits for the previous state.fetch()headersJSON bodyDOM writepaintrendered profile cardNo network value is invented here; the figure shows the fixed state order.
Figure: Fetch data becomes a rendered card. Model source: books/web-lab/06network_data/fetch_json_profile/diagrams/request_render.semantic.json.
fetch_json_profile.js
Visuals: captured from real browser rendering
const card = document.querySelector('#profile-card');
const nameLabel = document.querySelector('#profile-name');
const roleLabel = document.querySelector('#profile-role');

const response = await fetch('/api/profile.json');

const profile = await response.json();

card.dataset.role = profile.role;

nameLabel.textContent = profile.name;

roleLabel.textContent = profile.role;

  1. Request profile JSON from the API.

    A profile card waiting for API data before any JSON is rendered
    fetch resolves with a response object, but the profile card is still in its loading state.

  2. Parse the response body as JSON data.

    The same loading profile card before parsed JSON is written to DOM state
    The parsed object exists in JavaScript, but it has not changed DOM state yet.

  3. Store the profile role as a data attribute.

    The profile card switches to mentor styling after data-role is set
    Writing data-role lets CSS show that the API profile is a mentor before text changes.

  4. Render the profile name from JSON data.

    The mentor-styled profile card now shows the name Avery Stone
    The first text write makes the API profile name visible.

  5. Render the profile role from JSON data.

    The completed profile card shows Avery Stone as mentor
    The final text write completes the API-driven card.
fetch `fetch()` starts an HTTP request and resolves with a response object when the browser receives headers.
JSON response `response.json()` parses the response body into JavaScript data that code can read.
top-level await Modern JavaScript modules can use `await` at the top level, so the example can show the network steps without wrapping them in a function.
API-driven UI API data becomes visible when the program writes it into DOM state such as data attributes and text nodes.