Displaying an object array as a series of cards

[GatsbyFitz]

Hello! I have an array with a series of objects pulled from a dataloader:

const data = FileAttachment("data/Products.csv").csv();

and I am trying to turn the object array into a series of cards:

<div id="cards-container"></div>

<script>

    const container = document.getElementById('cards-container');
        
    data.forEach(item => {
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
            <h3>${item.planId}</h3>
            <p>${item.brand}</p>
        `;
        container.appendChild(card);
    });
</script>

<style>
    .card {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 16px;
        margin: 8px;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
    }
</style>

However, unfortunately it's not working, probably because I'm not pulling the data into the HTML in the right way :( I was wondering if anyone had any ideas?

Many thanks!!!

[balazskosi]

You can use an inline expression to interpolate the cards into the Markdown.

---
title: Displaying an object array as a series of cards
---

```js
const data = FileAttachment("data/Products.csv").csv()
```

${data.map(item => html`
    <div class="card">
        <h3>${item.planId}</h3>
        <p>${item.brand}</p>
    </div>
`)}

[GatsbyFitz]

Wonderfully simple, thank you for all your time and answer!