Building dynamic country list page 🚧
In this video we will request the JSON data using
http processor and store it
in fastn records. Later in the video, we will create a country list page that
will display the list of countries in form of cards that will display country's
flag and country's common name and also display values of population,
region and capital.We will build the dynamic country list page in three parts:
- We will declare all the
recordsin one document - In other document, we will create a
cardcomponent that will contain the data. - In
index.ftd, we will make use ofhttp processorto request the data and store in a list and display the data by calling the component.
Part 1 - Data Modelling
The JSON data is structred in a way, that some properties are nested within
another property.
So we will create a records and some of them will be nested within another
record.
models.ftd and declare all the records
within it.-- record country:
country-name name:
integer population:
string region:
string list capital:
country-flag flags:
The record `country` has a property `name` which has a type that itself is a
`record`.
Property `population` is an integer while `region` and `capital` are of string
type. Also, some countries have more than one capital hence we will create the
list of `capital`.
`flags` property also has a `record` datatype.
Let's declare the `country-name` and `country-flag` records too.
Lang:
ftd
-- record country-name:
optional string common:
string official:
Lang:
ftd
-- record country-flag:
caption svg:
Lang:
ftd
So we are done with the data-modelling part.
Part 2 - UI component
We will create a component let's say, country-card. This component will
display the data that will be requested from the JSON data, and displayed in
form of country cards.
fastn properties to create a good UI like we can add
default and on-hover shadow to the cards.-- import: backend/models
-- component country-card:
caption models.country country:
optional ftd.shadow shadow:
boolean $is-hovered: false
-- ftd.column:
width.fixed.px: 260
height.fixed.px: 375
overflow: auto
border-radius.rem: 0.5
margin.rem: 2
cursor: pointer
border-width.px: 1
border-color: #dedede
shadow: $default-card-shadow
shadow if { country-card.is-hovered }: $hovered-card-shadow
$on-mouse-enter$: $ftd.set-bool( $a = $country-card.is-hovered, v = true )
$on-mouse-leave$: $ftd.set-bool( $a = $country-card.is-hovered, v = false )
-- ftd.image:
src: $country-card.country.flags.svg
width: fill-container
height.fixed.percent: 50
-- ftd.column:
padding.rem: 1
spacing.fixed.rem: 0.5
width: fill-container
border-color: #dedede
height: hug-content
border-top-width.px: 1
-- ftd.text: $country-card.country.name.common
style: bold
role: $inherited.types.copy-regular
-- ftd.row:
spacing.fixed.rem: 1
-- ftd.column:
spacing.fixed.rem: 0.5
-- ftd.text: Population:
role: $inherited.types.label-large
style: semi-bold
-- ftd.text: Region:
role: $inherited.types.label-large
style: semi-bold
-- ftd.text: Capital:
if: { len(country-card.country.capital) > 0 }
style: semi-bold
role: $inherited.types.label-large
-- end: ftd.column
-- ftd.column:
spacing.fixed.rem: 0.5
-- ftd.integer: $country-card.country.population
role: $inherited.types.label-large
-- ftd.text: $country-card.country.region
role: $inherited.types.label-large
-- ftd.text: $capital-name
style: bold
role: $inherited.types.label-large
for: $capital-name, $index in $country-card.country.capital
-- end: ftd.column
-- end: ftd.row
-- end: ftd.column
-- end: ftd.column
-- end: country-card
-- ftd.shadow default-card-shadow:
color: #efefef
blur.px: 5
spread.rem: 0.2
-- ftd.shadow hovered-card-shadow:
color: #d5e3db
blur.px: 5
spread.rem: 0.2
Lang:
ftd
Part 3 - Display the country list page
Everything is ready. Let's assemble everything. We will request the JSON data
and display the data in the card using the component in the index.ftd
document.
processors and the
two documents.-- import: fastn/processors as pr
-- import: backend/models
-- import: backend/components/card
Lang:
ftd
We will create a list of
countries and the datatype will be record country
that we created in models document.-- models.country list countries:
$processor$: pr.http
url: https://restcountries.com/v3.1/all
Lang:
ftd
Now we will call the component
country-card from card document and we will
wrap it inside the row container component.-- ftd.row:
wrap: true
spacing: space-around
padding.rem: 2
border-radius.rem: 1
-- card.country-card: $country
for: $country in $countries
-- end: ftd.row
Lang:
ftd
There you go, the country list page is ready and you can see all the country
details are displayed in form of a card.
Join Us
Join us on Discord, and share your package which you will create following this
video. You can share it on the dicord's show-and-tell channel.
Thank you guys, keep watching these videos to learn more about fastn. Checkout
the fastn website.
