Loop Node Settings

The Loop Node settings panel allows for configuring iterations over arrays within your data flow.

It enables processing collections of data by triggering subsequent nodes for each item in a specified array.

Core Functionality

The Loop Node is essential for processing collections of data, performing actions for each element in a list, or repeating a sub-flow multiple times with different inputs.

Configuration Options

The panel provides the following configuration fields:

1. Header

  • Icon: A icon visually represents the looping functionality.
  • Title: "Loop Node" clearly identifies the type of node being configured.

2. Label

  • Field: Label
  • Description: A user-defined label for the Loop Node. This helps in identifying the node on the canvas, especially in complex flows.
  • Default Value: "Loop"
  • Input Type: Text input.
  • Behavior: The label is updated in the flow store when the input field loses focus (on blur).

3. Input Array Path (JSONPath)

  • Field: Input Array Path (JSONPath)
  • Description: This field requires a JSONPath expression that points to the array within the incoming JSON data that the loop should iterate over.
  • Default Value: $[*] (This typically means the loop will iterate over the root array of the input if the input itself is an array).
  • Input Type: Text input with a placeholder e.g., $.data.items[*] or $..users.
  • Usage Guidance:
    • A brief explanation is provided below the input: "Specify the JSONPath to the array you want to iterate over in the incoming data. Use {$[*]} for the root array."
  • Behavior: The JSONPath is updated in the flow store when the input field loses focus (on blur).
JSONPath Examples
  • To iterate over an array named users nested under a data object: $.data.users[*]
  • To iterate over all email properties anywhere in the JSON structure: $..email (though typically you'd point to an array of objects).
  • If the input to the loop node is directly an array [1, 2, 3], then $.[*] or $[*] would iterate over its elements.

Key Functionalities and Logic

  • State Management: The component uses useState to manage the local state of label and inputArrayPath. These are initialized from node.data or default values.
  • Data Persistence: useEffect is used to update the local state if the node.data props change (e.g., if changes are made externally or undone).
  • Updating Node Data: The updateNodeData function from useFlowStore is called on blur of the input fields to persist changes to the central store, but only if the value has actually changed.
  • Event Handling: onMouseDown with e.stopPropagation() is used on input fields to prevent node dragging or other canvas interactions when the user is typing in the settings panel.

Props

The LoopNodeSettings component expects the following props:

Prop NameTypeDescription
nodeNode<LoopNodeData>

The React Flow node object for the Loop Node being configured.


LoopNodeData interface:

  • label?: string: Custom node label.
  • inputArrayPath?: string: JSONPath to the iteration array.
  • [key: string]: any: Allows other arbitrary data.
Important Consideration

Ensure the JSONPath provided in Input Array Path correctly resolves to an array in the data passed to the Loop Node. If the path is incorrect or does not point to an array, the loop may not function as expected or could lead to errors in the flow execution.

This panel provides a straightforward interface for configuring the essential parameters of a Loop Node, enabling powerful iterative processing within data flows.

Successfully configured loops enhance workflow automation.

Loading search features...