*fetch

*fetch loads JSON from a URL and writes it into Sercrod host data. It is the simple GET-only helper. Use *response for response placement.

<serc-rod data='{"items":[]}' *fetch="/api/items.json" *response="'items'">
  <ul>
    <li *for="item of items">%item.title%</li>
  </ul>
</serc-rod>

Placement

*fetch places the parsed JSON with *response.

• *response="'items'" stores the parsed JSON at data.items.
• Map form can write selected response fields into data paths.
• Without *response, the fetched JSON replaces the host data root.

Timing

On non-clickable elements, *fetch auto-runs once for the same effective URL. On clickable elements, it runs on click.

<section *fetch="/api/items.json" *response="'items'"></section>
<button type="button" *fetch="/api/items.json" *response="'items'">Reload</button>

The current clickable trigger set is button, a without download, input[type=button], input[type=submit], input[type=reset], and input[type=image].

Decorative wrappers do not change this timing. Put *fetch on the actual trigger element.

<p class="load-control">
  <button type="button" *fetch="/api/items.json" *response="'items'">
    Load items
  </button>
</p>

Use a only when link-like behavior is intentional.

<p class="load-control">
  <a href="/items/" *fetch="/api/items.json" *response="'items'">
    Load items
  </a>
</p>

Do not rely on role="button" or tabindex="0" on a non-clickable element to change *fetch timing. In the current runtime, *fetch uses element tag/type to decide whether it is click-triggered or auto-run.

Legacy placement suffix

The older placement suffix form is still accepted when *response is absent, but new code should use *response. Do not introduce the older suffix form in new examples.

Use *api when you need method selection, request bodies, file inputs, request metadata, dry-run markers, or richer API behavior.