Displaying the List of Records
In the previous lesson, we created a table and entered our first records into it. Now, let's display them on the screen.
We will edit the function that returns HTML. We will add the first line to read data from our table into an array of objects.
We read the records from the table using the method findAll of our table. Note that before calling this method, we need to use the keyword await, as this is a database call; the code must wait for the findAll method to fetch the data and return the result.
// line 13
app.html('/', async(ctx,req) => {
const items = await catalogTable.findAll(ctx)
return <html>
///...
After that, we move on to editing the HTML code. We will add the following lines in the HTML under the h1 header:
// ...
{items.map( item =>
<div class="card">
<img src={item.image?.getThumbnailUrl(500,300)}/>
<div class='card-body p-2'>
<h3>{item.title}</h3>
<div>{item.material}</div>
<div>{item.dimensions}</div>
</div>
</div>
)}
// ...
Final Code
import {jsx} from '@app/html-jsx'
import {Heap} from '@app/heap'
const catalogTable = Heap.Table('pictures', {
title: Heap.String(), // title. string
image: Heap.ImageFile(), // image. required
material: Heap.Optional( Heap.String() ), // material. optional. string.
dimensions: Heap.Optional( Heap.String() ), // dimensions. optional. string.
price: Heap.NonRequired( Heap.Number(),0 ), // price. number. default 0
})
app.html('/', async(ctx,req) => {
const items = await catalogTable.findAll(ctx)
return <html>
<head>
<title>Art Catalog</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
</head>
<body>
<div class="container p-3 col-md-6 col-12">
<h1 class={"fs-1 fs-header fs-bold"}>Art Catalog</h1>
{items.map( item =>
<div class="card">
<img src={item.image?.getThumbnailUrl(500,300)}/>
<div class='card-body p-2'>
<h3>{item.title}</h3>
<div>{item.material}</div>
<div>{item.dimensions}</div>
</div>
</div>
)}
</div>
</body>
</html>
})
