Querying collection entries in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to query all entries from the 'posts' collection.

Astro

const posts = Astro.[1]('posts');

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

AgetCollection

BfetchEntries

CqueryDocs

DloadItems

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not exist in Astro.

Trying to fetch entries with a wrong method.

The Astro.getCollection function is used to get all entries from a collection by its name.

2fill in blank

medium

Complete the code to filter entries from the 'posts' collection where the slug equals 'welcome'.

Astro

const welcomePost = Astro.getCollection('posts').filter(post => post.data.slug [1] 'welcome');

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

A<=

B>

C===

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using assignment operator '=' instead of comparison.

Using inequality operators instead of equality.

The strict equality operator === checks if the slug exactly matches 'welcome'.

3fill in blank

hard

Fix the error in the code to correctly get the first entry from the 'authors' collection.

Astro

const firstAuthor = Astro.getCollection('authors').[1](0);

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

Afirst

Bat

Cshift

DgetFirst

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'first' or 'getFirst'.

Trying to call array methods that don't exist on the returned object.

The at(0) method returns the first element of an array in JavaScript.

4fill in blank

hard

Fill both blanks to create a dictionary of post titles keyed by their slugs for posts with more than 100 views.

Astro

const popularPosts = Object.fromEntries(
  Astro.getCollection('posts')
    .filter(post => post.data.views [1] 100)
    .map(post => [post.data.[2], post.data.title])
);

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

A>

Bslug

Cviews

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong comparison operator in the filter.

Using 'views' instead of 'slug' as the dictionary key.

We filter posts with views greater than 100 using > and use the slug as the key in the dictionary.

5fill in blank

hard

Fill all three blanks to create a filtered dictionary of uppercase author names keyed by their IDs for authors with verified status.

Astro

const verifiedAuthors = Object.fromEntries(
  Astro.getCollection('authors')
    .filter(author => author.data.[1] === true)
    .map(author => [author.data.[2], author.data.name.[3]()])
);

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

Averified

Bid

CtoUpperCase

DisVerified

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong property name for verification.

Using a method that does not exist on strings.

Using name as key instead of id.

The filter checks the 'verified' property for true, keys by 'id', and converts the name to uppercase using toUpperCase().

Practice

1. What does the where method do when querying collection entries in Astro Framework?

easy

A. It filters entries based on a given condition.

B. It deletes entries from the collection.

C. It adds new entries to the collection.

D. It sorts entries alphabetically.

Solution

1. Step 1: Understand the purpose of where

   The where method is used to select only those entries that meet a specific condition.

2. Step 2: Compare with other options

   Deleting, adding, or sorting entries are different operations not done by where.

3. Final Answer:

   It filters entries based on a given condition. -> Option A

4. Quick Check:

   where filters entries [OK]

Hint: Remember: where means filter entries by condition [OK]

Common Mistakes:

• Confusing where with adding or deleting entries
• Thinking where sorts entries
• Assuming where modifies the collection permanently

2. Which of the following is the correct syntax to filter entries where the field status equals "active"?

easy

A. collection.where(entry => entry.status == "active")

B. collection.filter(status = "active")

C. collection.where(status == "active")

D. collection.where(entry.status = "active")

Solution

1. Step 1: Identify correct function usage

   The where method expects a function that takes an entry and returns a boolean condition.

2. Step 2: Check each option's syntax

   collection.where(entry => entry.status == "active") correctly uses a function with an arrow and compares entry.status to "active". Others have syntax errors or wrong usage.

3. Final Answer:

   collection.where(entry => entry.status == "active") -> Option A

4. Quick Check:

   Correct arrow function syntax = collection.where(entry => entry.status == "active") [OK]

Hint: Use arrow function with entry parameter in where [OK]

Common Mistakes:

• Using assignment (=) instead of comparison (==)
• Omitting the entry parameter in the function
• Passing condition directly without a function

3. Given the collection entries:

[{ id: 1, type: "fruit" }, { id: 2, type: "vegetable" }, { id: 3, type: "fruit" }]

What will collection.where(entry => entry.type == "fruit") return?

medium

A. []

B. [{ id: 1, type: "fruit" }, { id: 3, type: "fruit" }]

C. [{ id: 2, type: "vegetable" }]

D. SyntaxError

Solution

1. Step 1: Identify entries matching the condition

   Entries with type == "fruit" are those with id 1 and 3.

2. Step 2: Understand where output

   The where method returns a list of matching entries, so it returns the two fruit entries.

3. Final Answer:

   [{ id: 1, type: "fruit" }, { id: 3, type: "fruit" }] -> Option B

4. Quick Check:

   Filter fruits = entries 1 and 3 [OK]

Hint: Filter entries by condition to get matching list [OK]

Common Mistakes:

• Returning non-matching entries
• Expecting a single entry instead of a list
• Confusing syntax error with correct code

4. What is wrong with this query?

collection.where(entry => entry.status = "active")

medium

A. The where method does not accept functions.

B. The arrow function is missing parentheses.

C. It uses assignment (=) instead of comparison (==).

D. The string "active" should be in single quotes.

Solution

1. Step 1: Identify the operator used

   The query uses a single equals sign (=), which assigns a value instead of comparing.

2. Step 2: Understand correct comparison syntax

   To compare, double equals (==) must be used inside the function.

3. Final Answer:

   It uses assignment (=) instead of comparison (==). -> Option C

4. Quick Check:

   Use == for comparison, not = [OK]

Hint: Use == for comparison inside where functions [OK]

Common Mistakes:

• Using = instead of == causes wrong filtering
• Thinking parentheses are required around single parameter
• Believing where can't take functions

5. You want to find all entries where score is greater than 50 and passed is true. Which query correctly does this?

hard

A. collection.where(entry => entry.score > 50, entry.passed == true)

B. collection.where(entry => entry.score > 50 || entry.passed == true)

C. collection.where(entry => entry.score > 50 & entry.passed == true)

D. collection.where(entry => entry.score > 50 && entry.passed == true)

Solution

1. Step 1: Understand logical AND condition

   To require both conditions, use the logical AND operator &&.

2. Step 2: Check each option's logic

   collection.where(entry => entry.score > 50 && entry.passed == true) uses && correctly. collection.where(entry => entry.score > 50 || entry.passed == true) uses OR (||), collection.where(entry => entry.score > 50 & entry.passed == true) uses bitwise AND (&) which is incorrect here, and collection.where(entry => entry.score > 50, entry.passed == true) has invalid syntax with two parameters.

3. Final Answer:

   collection.where(entry => entry.score > 50 && entry.passed == true) -> Option D

4. Quick Check:

   Use && for AND conditions in where [OK]

Hint: Use && to combine multiple conditions inside where [OK]

Common Mistakes:

• Using || instead of && for AND condition
• Using bitwise & instead of logical &&
• Passing multiple arguments instead of one function