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.