How to Display Lists of Data in Astro Pages

How to Display Lists of Data in Astro Pages

This guide will show you how to display lists of information on your Astro web pages. You’ll learn how to set up data in your page’s front matter and then use Astro’s templating features to show that data. We will also cover how to display a message when your list is empty.

Prerequisites

• Basic understanding of HTML.
• Familiarity with using a code editor.
• An existing Astro project setup.

Step 1: Define Your Data in Front Matter

First, you need to create the data you want to display. For this example, we’ll create a list of books. You define this data at the top of your Astro page file, between the three dashed lines (`—`). This area is called front matter.

We’ll start by defining what a single book looks like. We’ll create an interface, which is like a blueprint, called Book. This blueprint says each book must have a title (which is text) and an author (also text).

Then, we’ll create a list named books. This list will hold multiple book objects, each following our Book blueprint. Each object in the list will have a title and an author.

Here’s how you can set up this data in your Astro file:

---
interface Book {
  title: string;
  author: string;
}

const books: Book[] = [
  {
    title: "The Hitchhiker's Guide to the Galaxy",
    author: "Douglas Adams"
  },
  {
    title: "Pride and Prejudice",
    author: "Jane Austen"
  },
  {
    title: "1984",
    author: "George Orwell"
  }
];
---

Step 2: Loop Through Data to Display Items

Now that you have your data, you need to tell Astro how to show it on the page. You’ll do this in the HTML part of your Astro file, below the front matter.

To display something for each book in your list, you use curly braces {}. These tell Astro to run some code. Inside the braces, you’ll take your books list and use the .map() function.

The .map() function goes through each item in the list one by one. For every item, it runs a small function that you provide. This function gets the current book you are looking at as an argument.

Inside this function, you return the HTML you want to show for that single book. You can use parentheses () to wrap the HTML you are returning. This makes it clear what belongs to each book.

For each book, we’ll create a div with the class book-card. Inside that, we’ll add two paragraphs: one for the title and one for the author. To show the actual title and author, you use curly braces again, like {book.title}.

Here’s the code to display each book:

Our Books:

  {books.map((book) => (
    

      
{book.title}
      
{book.author}
    
  ))}

Step 3: Add Basic Styling (Optional)

To make your list look better, you can add some CSS styles. You can put these styles in a separate CSS file or directly in your Astro component file within a <style> tag.

These styles will add some spacing and colors to make the book cards and text easier to read. For example, you might add padding around the cards and change the text color.

Here are some example styles you could add:

  .book-card {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
  }
  .book-title {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
  }
  .book-author {
    font-style: italic;
    color: #555;
  }

Step 4: Conditionally Display a Message

Sometimes, your list might be empty. You don’t want to show a blank space or nothing at all. Astro lets you easily show a message when there are no items.

You can do this using another dynamic expression with curly braces. You check if the length of your books array is less than one (meaning it’s empty). You use the double ampersand && operator.

The && operator works like this: if the part on the left is true, it will show the part on the right. So, if books.length < 1 is true, it will show whatever comes after the &&.

We’ll put a paragraph tag with the message “No books to show.” after the part that lists the books. This message will only appear if the books array is empty.

Here’s how to add that conditional message:

  {books.map((book) => (
    

      
{book.title}
      
{book.author}
    
  ))}


{books.length === 0 && (
  
No books to show.
)}

Step 5: Test Your Empty List Message

To see your conditional message in action, you need to make the books list empty. Go back to the front matter section of your Astro file.

Delete all the book objects from the books array. Leave the array itself, but make sure there’s nothing inside the square brackets [].

After saving your file, check your website in the browser. You should now see the “No books to show.” message instead of the book list.

---
interface Book {
  title: string;
  author: string;
}

const books: Book[] = []; // The array is now empty
---

Conclusion

You have successfully learned how to define data in Astro’s front matter, loop through that data to display a list of items, and conditionally show a message when the list is empty. This is a fundamental skill for building dynamic websites with Astro.

Source: Astro Crash Course #6 – Outputting Lists (YouTube)