We can use the n:for attribute to render a list of items based on an array. This attribute requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on:
<body>
<h1>Shopping List :<h1>
<div n:for="i in cart">
<p>{i}</p><br>
</div>
</body>
<script>
let cart = ['Eggs','Olive Oil','Coconut','Chicken'];
</script>
To reload the list, we can use n:reload attribute in the same tag with n:for and give it a unique value. Unique value is important as the loop can be reloaded from any file/component.
The reload function is used to reload those lists/async-loader(s) whose n:reload value matches the value passed inside the function.
<body>
<input type="text" id="newItem">
<input type="button" on:click="AddItem()" placeholder="What item to add ?">
<h1>Shopping List :<h1>
<div n:for="i in cart" n:reload="cart">
<p>{i}</p><br>
</div>
</body>
<script>
import {reload} from "nijor";
let cart = ['Eggs','Olive Oil','Coconut','Chicken'];
function AddItem(){
let item = document.getElementById('newItem').value;
cart.push(item);
reload('cart'); // Reload the list/async-loader with n:reload="cart"
}
</script>