diff options
| author |  Tony @ Navillus <60468564+tony-navillus@users.noreply.github.com>
| 2021-06-25 23:07:11 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-25 14:07:11 -0700 |
| commit | 245632bc31f849f5cd803824ddaa3bf566a17006 (patch) | |
| tree | 854706ab82fe74e0e6eeb9e7f926cc85df6f9508 | |
| parent | f3e005de6f35e3e67ec5e513e0de5e1b6c04d664 (diff) | |
| download | astro-245632bc31f849f5cd803824ddaa3bf566a17006.tar.gz astro-245632bc31f849f5cd803824ddaa3bf566a17006.tar.zst astro-245632bc31f849f5cd803824ddaa3bf566a17006.zip | |
Update collections.md (#549)
Updating the Individual Pages from a Collection example to fix a few typos.
- The pokemon API returns an object with an array named `results` (plural)
- `data()` needs to wrap the object in an Array
- accessing item data needs to use `collection.data[0]` to grab data from the `data()` Array
| -rw-r--r-- | docs/collections.md | 7 |
1 files changed, 4 insertions, 3 deletions
diff --git a/docs/collections.md b/docs/collections.md index ee905b4db..b561f2512 100644 --- a/docs/collections.md +++ b/docs/collections.md @@ -162,7 +162,7 @@ const { collection } = Astro.props; export async function createCollection() { const allPokemonResponse = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); const allPokemonResult = await allPokemonResponse.json(); - const allPokemon = allPokemonResult.result; + const allPokemon = allPokemonResult.results; return { // `routes` defines the total collection of routes as data objects. routes: allPokemon.map((pokemon, i) => { @@ -175,8 +175,9 @@ export async function createCollection() { // Luckily we had already loaded all of the data at the top of the function, // so we just filter the data here to group pages by first letter. // If you needed to fetch more data for each page, you can do that here as well. + // Note: data() is expected to return an array! async data({ params }) { - return allPokemon[params.index]; + return [allPokemon[params.index]]; }, // Note: The default pageSize is fine because technically only one data object // is ever returned per route. We set it to Infinity in this example for completeness. @@ -188,7 +189,7 @@ export async function createCollection() { <head> <title>Pokemon: {collection.params.name}</head> <body> - Who's that pokemon? It's {collection.data.name}! + Who's that pokemon? It's {collection.data[0].name}! </body> </html> ``` |