http
processor and data modelling
In this part, we will delve into concepts like http
processor and data modelling
using a simple example.
[ { "name": "India", "capital": "New Delhi" }, { "name": "Sri Lanka", "capital": "Sri Jayawardenepura Kotte" }, { "name": "Nepal", "capital": "Kathmandu" }, { "name": "Bangladesh", "capital": "Dhaka" }, { "name": "Indonesia", "capital": "Jakarta" }, { "name": "Maldives", "capital": "Malé" } ]
http processor
, save the data as a record
by using for loop
and display it in a tabular form.By the end of this part, you will have gained insights into how using fastn
, REST APIs can seemlessly connect the backend with the frontend.
fastn package
.fastn
package?fastn
package is a folder that requires atleast two files http
processor does the network communication using REST API and fetches data from the external site in a different domain.
http
processor is as follows:-- import: fastn/processors as pr -- record r: $processor$: pr.http
record
For this example, we will use record
feature of fastn
’s. record
can be used to create a user defined data type.
country-data
.country-record
-- record country-data: string name: string capital:
fastn/processors
index.ftd
document-- import: fastn/processors as pr
record
country-data
record-- record country-data: string name: string capital:
country-data
record as the type.countries
is a list
of country-data
-- country-data list countries:
$processor$: pr.http
will initialise countries
with the data returned by the url
.-- country-data list countries: $processor$: pr.http url: https://famous-loincloth-ox.cyclic.app/
url
and stored it in countries
, we want to show it to user. To do that let’s create a component called country-detail
.country-detail
-- component country-detail: -- end: country-detail
country
. We will mark it as caption
to make easy for users of this component.-- component country-detail: caption country-data country: -- end: country-detail
-- component country-detail: caption country-data country: -- ftd.text: $country-detail.country.name -- end: country-detail
for
loop.-- country-detail: $country for: $country in $countries
row
container-- ftd.row: width.fixed.percent: 20 -- ftd.text: $country-detail.country.name -- ftd.text: $country-detail.country.capital -- end: ftd.row
http
processor and one of the data modelling type, record
.fastn
properties to improve the UI to display the data, let’s say in the form of a table.-- import: fastn/processors as pr -- ftd.column: width: fill-container padding.px: 40 align-content: center -- ftd.row: width.fixed.percent: 30 -- ftd.text: Country role: $inherited.types.copy-regular style: bold border-bottom-width.px: 1 width.fixed.percent: 40 border-width.px: 1 border-style-horizontal: dashed padding-left.px: 10 background.solid: $inherited.colors.background.base -- ftd.text: Capital role: $inherited.types.copy-regular style: bold padding-left.px: 10 border-bottom-width.px: 1 width.fixed.percent: 40 border-width.px: 1 border-style-horizontal: dashed background.solid: $inherited.colors.background.base -- end: ftd.row -- country-detail: $country for: $country in $countries -- end: ftd.column -- record country-data: string name: string capital: -- country-data list countries: $processor$: pr.http url: https://famous-loincloth-ox.cyclic.app/ -- component country-detail: caption country-data country: -- ftd.row: width.fixed.percent: 30 -- ftd.text: $country-detail.country.name role: $inherited.types.copy-regular width.fixed.percent: 40 border-width.px: 1 border-style-horizontal: dashed padding-left.px: 10 -- ftd.text: $country-detail.country.capital role: $inherited.types.copy-regular padding-left.px: 10 width.fixed.percent: 40 border-width.px: 1 border-style-horizontal: dashed -- end: ftd.row -- end: country-detail
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord 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.