Forty stalls are coming next month. The vendor list loads four at a time with ?limit=4&page=n, shows how many there are in total, and has a Load more button that appends the next page, until there isn't one. ★★☆
“Do I really have to scroll past all the food to get to the records?”
You'll demo (next class): the first four, "4 of 10". Load more twice: twelve requested, ten shown, the button gone. Click Food: back to page 1 of the food stalls.
Four things, on top of your connected market. They count when they work with chaos on (control page).
GET /api/stalls?limit=4&page=1, then the next page on Load more, appended.X-Total-Count.Link, or from the total).What has to work for the demo next class, not how. The core above is part of it.
GET /api/stalls?limit=4&page=1, then page 2, 3…X-Total-Count header; whether there's a next page from the Link header.&tag=food).New tool: Reading a header: response.headers.get("Link"). The format is described on MDN · Link.
| Method | Path | Answers |
|---|---|---|
GET | /api/stalls?limit=&page=&tag= | 200 · X-Total-Count · Link: <…&page=3>; rel="next" |
IntersectionObserver instead of the button.?page=3 loads pages 1–3.Network panel first: is the request sent, with what, and what came back? Then a hint.
Your getJSON returns only the body. Where do the headers go?
Two lists in flight, one for All and one for Food: which may append?
This brief assumes Connect the market is done: api.js works, the stalls come from the API, loading and errors are handled. Then: ?limit=4&page=1 in the Network panel, and the X-Total-Count header read in the console.