Skip to main content

Array

Array: binds to a shared client-side array by id — read its items and count, seed its contents, and react to changes made anywhere.

Client-side arrays live in a global registry keyed by id: every node that names the same id — this node, Insert/Remove/Clear Array nodes, other components — reads and mutates the same underlying array. Collection2 binds to the array named on collectionId (Id) and exposes it on items (the live array), plus count, firstItemId and id. Whenever the array's contents change — from any node or code, anywhere in the app — changed fires and count/firstItemId update. Connecting an array to the items input copies that source array's contents into this array, and keeps re-copying while the source changes. If fetch (signal) is connected the node defers: a new collectionId only takes effect when fetch fires (then fetched fires), and automatic changed events are suppressed.

When to use it

Local list state shared across components without any wiring between them: give every interested node the same Array Id. For server data use DbCollection2 (Query Records); for a single object use Model2 (Object); to mutate the array use Insert/Remove/Clear Array nodes rather than manipulating items in code.

At a glance

CategoryData
Type nameCollection2
Available inbrowser, cloud
SSR compatibilitysafe
Provided bynoodl-runtime

Inputs

Values

NameTypeDefaultDescription
collectionIdString (CollectionName id)Id of the shared array to bind to; the first node to use an id creates the array, and every later node naming it reaches the same one
itemsArrayundefined leaves this Array's current collection alone (no opinion supplied). null clears it — every item is removed and Changed fires once, the same as connecting an empty collection.
runOnChange-arrayBooleantrueWhether a new value on Array contents re-runs this node. On by default; untick to make this input passive so only the control signal runs it
runOnChange-collectionIdBooleantrueWhether a new value on Id re-runs this node. On by default; untick to make this input passive so only the control signal runs it

Signals

NameTypeDefaultDescription
fetchSignalRe-reads the array named by Id and rebinds this node to it. This is additional to Id rebinding on change and to array changes being announced; untick either under Run On Value Change to stop it

Outputs

Values

NameTypeDefaultDescription
countNumberHow many objects the bound array holds
firstItemIdStringId of the first object in the array, or empty while the array holds nothing
idStringId of the array this node is currently bound to
itemsArrayThe bound array itself, for a Repeater or another Array node to read

Signals

NameTypeDefaultDescription
changedSignalFires when the bound array gains or loses items; suppressed while Fetch is connected
completedSignalFires after every invocation. This node has no other outcome — no Unchanged and no Failure — so it always fires together with Done, and wiring either one does the same thing. It is here on every action so that reaching for it is never a per-node decision
doneSignalFires when a Fetch finished and the outputs are up to date
fetchedSignalFires once Fetch has rebound this node and the outputs are up to date

Patterns

  • Same collectionId in many components: a list page shows the array while a form elsewhere inserts into it — no connections needed between them.
  • items → For Each items: the canonical local list.
  • Feed collectionId from Create New Array id to bind to a dynamically created array.

Watch out for

  • Using it for cloud data — it is purely client-side, nothing is persisted; use DbCollection2 (Query Records) instead.

Examples

Named shared array with insert, remove and clear

A client-side list without a backend: an Array node (Collection2) binds to the named shared array 'todos' and feeds a Repeater. Add Item (CollectionInsert), Remove Item (CollectionRemove) and Clear (CollectionClear) mutate the same array by its collectionId; every node bound to that id — including the Array feeding the list — sees the change immediately. Ids on wires tie the writers to the store.

Run Tasks: batch-process an array with a worker component

Run Tasks executes its taskTemplate component once per element of items, up to maxRunningTasks at a time, and fires completed when the whole batch has finished, whatever the outcome — done is the narrower signal that the run finished having done its work. The worker is a plain component: it receives the item's properties through Component Inputs and reports completion through Component Outputs signals (success/failure), which Run Tasks consumes to schedule the next task. Here a fresh array is assembled with New Array and processed on click.

Create New Array, Insert Object Into Array, Remove Object From Array, Clear Array, Array Filter, Array Map, Repeater, Object, Query Records

Generated

This page is generated from node-catalog-enriched.json. Do not edit it by hand — run npm run docs:nodes to regenerate, and fix the source enrichment instead.