Lists Rendering

The g-for directive is a powerful feature in Grapper that allows you to render a block of SVG elements multiple times based on an array or an object's properties. It provides a convenient way to iterate over data and dynamically generate content in your templates.

g-for

The g-for directive creates each array element by cloning the content element.

Each array data

"item of data" is the directive expression. It specifies the iteration and defines a variable (item in this example) to represent each element iterating the array.

You can also access the index of the current iteration by using an optional second parameter in the g-for syntax:

Each object property

"prop in obj" is the directive expression. It specifies the iteration and defines a variable (prop in this example) to represent each property value into the object.

You can also access the key by using an optional second parameter in the g-for syntax:

Destructuring

You can use the JavaScript destructuring assignment syntax for unpack properties from objects into distinct variables.

Range number

Additionally, g-for supports the iteration over a range of numbers with n of number. This example will render 10 circle elements starting with 0:

Additionally, g-for supports the iteration over a range of numbers with n in number. This example will render 10 circle elements starting with 1: