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
data.
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
another property.
So we will create a `records` and some of them will be nested within another
record.
Create a new document, let's say `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.
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`
document.
We will need the two documents and processors so import the `processors` and the
two documents.
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.
Support us by clicking on this link and give us a star ⭐ on GitHub and join
our fastn community on Discord.
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community
today.
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.