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:
1. We will declare all the `records` in one document
2. In other document, we will create a `card` component that will contain the
3. In `index.ftd`, we will make use of `http processor` to 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
So we will create a `records` and some of them will be nested within another
Create a new document, let's say `models.ftd` and declare all the `records`
-- record country:
string list capital:
The record `country` has a property `name` which has a type that itself is a
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.
-- record country-name:
optional string common:
-- record country-flag:
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.
We can apply various `fastn` properties to create a good UI like we can add
default and on-hover `shadow` to the cards.
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`
We will need the two documents and processors so import the `processors` and the
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 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.
Support us by clicking on this link and give us a star ⭐ on GitHub and join
our fastn community on Discord.