Fetching data from server

We can fetch data from the server using the following syntax.


            <body>
                <div n:fetch="result:func()"> <!--'result' is the variable that is retured from the async function 'func'--->
                    <n:data>
                        <!--This section gets rendered when 'result' is fetched--->
                        <!--You can use the 'result' variable here--->
                    <n:data>
                    <n:loading>
                        <!--This section gets rendered when 'result' is being fetched --->
                    <n:loading>
                    <n:error catch="err">
                        <!--This section gets rendered if there is an error while fetching 'result' --->
                        <!--You can catch the error in the variable specified in the optional 'catch' attribute --->
                    <n:error>
                <div>
            </body>
            <script>
                async function func(){
                    const result = await fetch('.....');
                    // Some more code here ....
                }
            </script>

You can only use the n:fetch attribute on a div, not on any other html element.
Let's understand it using an example :


            <loading_spinner n:imported="....."/>
            <body>
                <div n:fetch="planet:getPlanet()">
                    <n:data>
                        <h1>Welcome from {planet} !</h1>
                    <n:data>
                    <n:loading>
                        <loading_spinner></loading_spinner>
                        <p>Please wait while Planet is being loaded ...</p>
                    <n:loading>
                    <n:error catch="err">
                        <p>An unexpected error occured : {err}</p>
                    <n:error>
                <div>
            </body>
            <script>
                async function func(){
                    const id = Math.floor(Math.random() * 60) + 1;
                    const response = await fetch(`https://swapi.tech/tech/planets/${id}`);
                    const data = await response.json();
                    return data.name;
                }
            </script>

Looping over data fetched from server

If our fetched data is an array of objects, we have to loop over each item, but since we can't use the n:for loops inside n:data , we have a special syntax for it.
Let's understand with the help of an example : Suppose we are building a housing portal and we've to display all the houses which are available for rent in Silicon Valley.


            <house_card n:imported="...."/>
            <body>
                <div n:fetch="house:getHouses(city)">
                    <n:data loop> <!--Everything inside n:data will be looped for all entries-->
                        <house_card address="{house.address}" rent="{house.rent}"></house_card>
                    </n:data>
                    <n:loading>Loading Houses ...</n:loading>
                    <n:error>An error occured while loading houses.</n:error>
                </div>
            </body>
            <script>
                async function getHouses(){
                    // ... API Calls
                    return data; // An array of object
                }
            </script>

We have another way of writing loops inside n:data which is useful in certain conditions.
Example :


            <n:data loop>
                <h1>Houses are :</h1> <!-- This content will get rendered as many times as the number of times <house_cards> gets rendered-->
                <house_card address="{house.address}" rent="{house.rent}"></house_card>
            </n:data>

<h1>Houses are :</h1> will get rendered as many times as the number of times <house_cards> gets rendered.
In order to prevent it, we have to modify our code in this way.


            <n:data loop>
                <h1>Houses are :</h1> <!-- This content will get rendered only once -->
                <n:loop> <!-- Everything writen inside will be looped -->
                    <house_card address="{house.address}" rent="{house.rent}"></house_card>
                </n:loop>
            </n:data>