Nijor provides a declarative and highly efficient mechanism to render lists of items or repeated HTML structures using the n:loop attribute.
When iterating through data, Nijor expects three core attributes :
n:loop: Declares that the target element represents a looping template.
source: Specifies the array variable defined inside your component's script.
var: Defines the name of the variable to represent the current item in the current iteration.
A loop must always be declared on a wrapping parent container element (such as a <div>, <ul>, or a custom component container).
Crucial Constraint: Do not add an id attribute to the element featuring the n:loop directive, as Nijor manages the identification of repeated nodes dynamically under the hood.
<import name="house" source="@/components/house-card.nijor">
<body>
<div n:loop var="house" source="houses">
<house name="{house.name}" rent="₹{house.rent}" location="{house.location}"></house>
</div>
</body>
<script>
const houses = [
{ name: "The Sky Mansion", rent: 62000, location: "Hengrabari, Guwahati" },
{ name: "The Octagon Villa", rent: 30000, location: "Ganeshguri, Guwahati" },
{ name: "The Dragon Palace", rent: 45000, location: "Kahilipara, Guwahati" },
];
</script>
You can combine loops with reactive state by prefixing the array source with $.. This allows you to dynamically append, remove, or modify items inside the list, causing the loop to automatically re-render and reflect the updated array.
<import name="house" source="@/components/house.nijor">
<body>
<div n:loop var="house" source="$.houses">
<house name="{house.name}" rent="₹{house.rent}" location="{house.location}"></house>
</div>
<button on:click="loadMore()">Load More Houses</button>
</body>
<script>
$.houses = [
{ name: "The Sky Mansion", rent: 62000, location: "Hengrabari, Guwahati" },
{ name: "The Octagon Villa", rent: 30000, location: "Ganeshguri, Guwahati" },
{ name: "The Dragon Palace", rent: 45000, location: "Kahilipara, Guwahati" },
];
export async function loadMore($) {
const response = await fetch('/api/more-houses');
const nextHouses = await response.json();
// Re-assigning the reactive array triggers a direct template refresh
$.houses = [...$.houses, ...nextHouses];
}
</script>
When a reactive loop's array is re-assigned (e.g., using array spreading), Nijor's current rendering system re-evaluates and updates the entire list container template.
While this ensures robust synchronization between your JavaScript state and the DOM, keep it in mind when rendering extremely large lists (e.g., thousands of items), where optimizing the frequency of array updates will ensure smooth interface rendering.