Fetching APIs in frontmatter in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from an API in Astro frontmatter.

Astro

---
const response = await fetch([1]);
const data = await response.json();
---

Drag options to blanks, or click blank then click option'

AfetchData()

Bdata

C'https://api.example.com/data'

Dawait fetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of the URL string.

Calling a function that is not defined.

In Astro frontmatter, you use fetch with the API URL as a string to get data.

2fill in blank

medium

Complete the code to handle the JSON response correctly in Astro frontmatter.

Astro

---
const response = await fetch('https://api.example.com/data');
const data = await response.[1]();
---

Drag options to blanks, or click blank then click option'

Atext

Bjson

Cxml

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns raw text.

Using blob() or xml() which are not for JSON.

The json() method parses the response body as JSON.

3fill in blank

hard

Fix the error in the Astro frontmatter fetch code to await the fetch call.

Astro

---
const response = [1]('https://api.example.com/data');
const data = await response.json();
---

Drag options to blanks, or click blank then click option'

Aawait fetch

BfetchData('https://api.example.com/data')

Cfetch('https://api.example.com/data').then()

Dawait response

Attempts:

3 left

💡 Hint

Common Mistakes

Not awaiting the fetch call causes errors when calling json().

Using then() without proper async handling.

You must await the fetch call to get the response before calling json().

4fill in blank

hard

Fill both blanks to create a frontmatter fetch that gets JSON and extracts the 'items' property.

Astro

---
const response = await fetch([1]);
const data = await response.[2]();
const items = data.items;
---

Drag options to blanks, or click blank then click option'

A'https://api.example.com/items'

Bjson

Ctext

D'https://api.example.com/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json().

Using the wrong URL string.

Use the correct API URL and json() to parse the response.

5fill in blank

hard

Fill all three blanks to fetch data, parse JSON, and map item names in Astro frontmatter.

Astro

---
const response = await fetch([1]);
const data = await response.[2]();
const names = data.items.map(item => item.[3]);
---

Drag options to blanks, or click blank then click option'

A'https://api.example.com/products'

Bjson

Cname

D'https://api.example.com/items'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong URL for fetching.

Not parsing JSON before mapping.

Accessing a wrong property instead of 'name'.

Fetch from the correct URL, parse JSON, then map the 'name' property from each item.

Practice

1. What is the main purpose of fetching APIs in the frontmatter of an Astro component?

easy

A. To get data before the page renders so it shows fresh content immediately

B. To delay data loading until after the page is fully loaded

C. To style the page using CSS variables

D. To handle user input events on the page

Solution

1. Step 1: Understand frontmatter role in Astro

   Frontmatter runs before the page renders, allowing data fetching early.

2. Step 2: Purpose of fetching API in frontmatter

   Fetching data here ensures the page shows fresh content immediately when loaded.

3. Final Answer:

   To get data before the page renders so it shows fresh content immediately -> Option A

4. Quick Check:

   Fetching in frontmatter = fresh data before render [OK]

Hint: Frontmatter fetches data before page shows [OK]

Common Mistakes:

• Thinking data loads after page renders
• Confusing frontmatter with styling or events
• Assuming frontmatter runs on client side

2. Which of the following is the correct syntax to fetch data in Astro frontmatter?

easy

A. ---
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---

B.

C. const data = fetch('https://api.example.com/data');

D. ---
fetch('https://api.example.com/data')
---

Solution

1. Step 1: Identify frontmatter syntax

   Astro frontmatter uses triple dashes --- to enclose code that runs before rendering.

2. Step 2: Correct async fetch usage

   Using await fetch and await response.json() inside frontmatter is correct to get JSON data.

3. Final Answer:

   --- const response = await fetch('https://api.example.com/data'); const data = await response.json(); --- -> Option A

4. Quick Check:

   Frontmatter uses --- and await fetch [OK]

Hint: Use --- and await fetch inside frontmatter [OK]

Common Mistakes:

• Using fetch without await in frontmatter
• Placing fetch inside <script> tag instead of frontmatter
• Not parsing response with .json()

3. Given this Astro frontmatter code, what will be the value of data.message in the component?

---
const response = await fetch('https://api.example.com/greet');
const data = await response.json();
---

{data.message}

Assuming the API returns JSON: { "message": "Hello, Astro!" }

medium

A. undefined

B. "Hello, Astro!"

C. SyntaxError

D. null

Solution

1. Step 1: Understand fetch and JSON parsing

   The fetch gets the API response, and await response.json() parses it into an object with a message property.

2. Step 2: Accessing data.message in component

   The component uses {data.message} which will display the string from the API: "Hello, Astro!".

3. Final Answer:

   "Hello, Astro!" -> Option B

4. Quick Check:

   API message property = "Hello, Astro!" [OK]

Hint: Parsed JSON data shows in component as expected [OK]

Common Mistakes:

• Forgetting to await response.json()
• Trying to access data before fetch completes
• Assuming data.message is undefined or null

4. What is wrong with this Astro frontmatter code?

---
const data = fetch('https://api.example.com/data');
const json = data.json();
---

medium

A. Using triple dashes --- incorrectly

B. json() is not a function

C. fetch URL is invalid syntax

D. Missing await before fetch and json() calls

Solution

1. Step 1: Check async fetch usage

   fetch returns a Promise, so it must be awaited to get the response object.

2. Step 2: Check json() call

   response.json() also returns a Promise and must be awaited to get parsed data.

3. Final Answer:

   Missing await before fetch and json() calls -> Option D

4. Quick Check:

   Always await fetch and response.json() [OK]

Hint: Always await fetch and json() in frontmatter [OK]

Common Mistakes:

• Not using await causing unresolved Promises
• Assuming fetch is synchronous
• Calling json() on Promise instead of response

5. You want to fetch a list of users from an API in Astro frontmatter and display their names. Which approach correctly fetches and prepares the data for rendering?

---
// Option A
const res = await fetch('https://api.example.com/users');
const users = await res.json();
---


  {users.map(user => 
{user.name}
)}

hard

A. Fetch data in frontmatter but forget to parse JSON

B. Fetch without await, map users directly on Promise

C. Fetch with await, parse JSON, then map users in component

D. Use fetch inside component JSX without frontmatter

Solution

1. Step 1: Fetch and parse JSON in frontmatter

   Using await fetch and await res.json() gets the user list as an array before rendering.

2. Step 2: Map over users array in component

   Mapping users to list items displays each user name correctly in the rendered HTML.

3. Final Answer:

   Fetch with await, parse JSON, then map users in component -> Option C

4. Quick Check:

   Await fetch + parse + map users = correct [OK]

Hint: Await fetch and parse JSON before mapping data [OK]

Common Mistakes:

• Mapping over unresolved Promise instead of data array
• Fetching inside JSX causing runtime errors
• Not parsing JSON before using data