Array
This node creates or references an ordered list of objects.
The Array node is the central hub for managing lists of data in XFORGE.
The Array node manages a collection of objects. It can either create a new local array or reference a shared array using an ID. It provides outputs for the array items, the count of items, and signals when the array changes.
Inputs
General
| Data | Description |
|---|---|
| Items | The source data to populate the array. You can connect a Static Array or another array here. By default, the content is copied immediately. If the Set signal is connected, copying only happens when signaled. |
| Id | A unique identifier for the array. If specified, this node will reference the shared array with this ID. All Array nodes sharing the same ID access the same data. |
Actions
| Signal | Description |
|---|---|
| Set | Triggers the update of the array from the Items input. Useful for controlling when data is copied. |
| Fetch | Manually retrieves the array data associated with the Id. Essential when you need to ensure data is loaded before operations begin. |
Outputs
Data
| Data | Description |
|---|---|
| Items | The actual array object (XGENIA.Array). Connect this to nodes like Repeater to display the list. |
| Count | The number of items currently in the array. |
| Id | The ID of the array being used. |
Signals
| Signal | Description |
|---|---|
| Changed | Triggered whenever the array content changes (item added, removed, or modified), whether by this node or another node referencing the same ID. |
| Fetched | Triggered when the Fetch action completes and data is ready. |
Usage
Arrays are fundamental for handling lists of data, such as search results, shopping carts, or user lists.
Modes of Operation
- Local Array: Leave Id empty. The node creates a new, isolated array.
- Shared Array: Set a specific Id (e.g., "myUserList"). Any other Array node with "myUserList" will see and modify the same data.
- Data Source: Connect a data source to Items to populate the array.
Example Use Cases
- Displaying a List:
- Connect a Static Array to Items.
- Connect the Items output to a Repeater.
- The Repeater will render one item for each entry in the array.
- Shared State:
- Create an Array node with Id "GlobalSettings".
- In a different part of your app (or a different page), create another Array node with Id "GlobalSettings".
- Changes made in one location are immediately reflected in the other.
- Reactive UI:
- Connect the Count output to a Text node to show "X items in cart".
- Connect the Changed signal to trigger an animation whenever the list updates.
Best Practices
- Use IDs for State: Use the Id property to share data across your application without drawing long wires.
- Fetch Control: If your array data comes from a slow source (like a database), use the Fetch signal to manage loading states.
- Type Consistency: While arrays can hold mixed types, it is best practice to keep all items in an array consistent (e.g., all objects with the same structure) for easier binding in Repeaters.