Product documentation and training for Shipcode.
Pipes Reference: Array Pipes
Pipes used for list processing, filtering, and ordering on arrays.

This section defines Pipes used for list processing, filtering, and ordering on arrays. These include:


mapPath

  • Usage Syntax: {{ inputArray | mapPath: 'path': 'to': 'property' }}
  • Evaluates to: any[]
  • Description: The mapPath pipe iterates through each element in the input array and selects a nested property based on the path provided. The result is a new array of extracted values, with undefined in any position where the path does not resolve.
    • Useful for:
      • Simplifying arrays of objects into flat arrays of values.
      • Supports deep paths via multiple string arguments.
  • Parameters:
    • ...path:
      • Type: string[]
      • Required: Yes
      • Description: One or more string keys used to access the nested property value.
  • Returns:
    • any[]: An array containing values extracted from each item in the input array based on the specified path. undefined is used where the path cannot be resolved.
  • Example 1: Mapping a top-level field
    • {{ users | mapPath: 'name' }}
    • Output: ['Alice', 'Bob'] (if users = [{ name: 'Alice' }, { name: 'Bob' }])
  • Example 2: Mapping a nested field
    • {{ users | mapPath: 'profile': 'age' }}
    • Output: [25, 30] (if users = [{ profile: { age: 25 } }, { profile: { age: 30 } }])
  • Example 3: Turning object into array and finding values
    • {{ input | keyValue | mapPath: 'value': 'amount' }}
    • Output: ['200', '175'] (if input = { maxPrice: { amount: '200', code: 'USD' }, minPrice: { amount: '175', code: 'USD' } })
  • Notes:
    • If any part of the path does not exist on an element, the result will contain undefined in that position.
    • Works well when combined with pipes like filter, sort, or keyValue.

mapReplace

  • Usage Syntax: {{ inputArray | mapReplace: 'searchString': 'replaceString': 'path': 'to': 'property' }}
  • Evaluates to: string[]
  • Description: The mapReplace pipe iterates over an input array and accesses a nested property using a path, like mapPath, but then replaces part of the string value found at that path.
    • Performs a search-and-replace using either a string or regular expression.
    • Returns an array of modified strings.
  • Parameters:
    • searchString:
      • Type: string | RegExp
      • Required: Yes
      • Description: The substring or regular expression pattern to search for.
    • replaceString:
      • Type: string
      • Required: No
      • Description: The string to replace the match with. Defaults to an empty string.
    • ...path:
      • Type: string[]
      • Required: Yes
      • Description: One or more keys to access the nested string value in each array element.
  • Returns:
    • string[]: An array of strings where each value has had its matching substring replaced. Returns undefined if the path doesn't exist or the value is not a string.
  • Example 1: Simple replace
    • {{ users | mapReplace: 'Smith': 'Jones': 'name' }}
    • Output: ['Alice Jones', 'Bob Jones'] (if users = [{ name: 'Alice Smith' }, { name: 'Bob Smith' }])
  • Example 2: Regex replace
  • Example 3: Path not found
    • {{ list | mapReplace: 'abc': 'xyz': 'missing': 'key' }}
    • Output: [undefined]
  • Notes:
    • Supports both string and RegExp search patterns.
    • If replaceString is omitted, matches will be removed.
    • Non-string values at the target path will result in !error.

sort

  • Usage Syntax:
    • {{ inputArray | sort }}
    • {{ inputArray | sort: 'asc' }}
    • {{ inputArray | sort: 'desc': 'path': 'to': 'property' }}
  • Evaluates to: any[]
  • Description: The sort pipe orders an input array using primitive comparison operators. By default, it sorts values in ascending order. If a nested path is specified, a direction must also be provided.
    • Correctly handles both string and numeric values.
    • Sorting direction can be either 'asc' (default) or 'desc'.
  • Parameters:
    • direction:
      • Type: string
      • Required: No
      • Description: The sort direction. Must be 'asc' or 'desc'. Defaults to 'asc'.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: One or more keys to access a nested value to sort by. Required if pathing.
  • Returns:
    • any[]: A new array sorted according to the specified criteria. Returns !error if the input is not an array, if path is provided without a direction, or proper direction is not passed in.
  • Example 1: Sort numeric array in ascending order (default)
    • {{ [5, 3, 9, 1] | sort }}
    • Output: [1, 3, 5, 9]
  • Example 2: Sort strings in descending order
    • {{ ['banana', 'apple', 'cherry'] | sort: 'desc' }}
    • Output: ['cherry', 'banana', 'apple']
  • Example 3: Invalid usage - path without direction
    • {{ results | sort: 'score' }}
    • Output: !error
  • Notes:
    • Always returns a new sorted array (does not mutate the original).
    • Path-based sorting requires a direction to be specified explicitly.

sortIncludes

  • Usage Syntax:
    • {{ inputArray | sortIncludes: 'searchTerm': 'asc' }}
    • {{ inputArray | sortIncludes: /regex/: 'desc': 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The sortIncludes pipe sorts an input array based on whether each element contains a specified string or matches a regular expression. Matches are ranked higher or lower depending on the specified sort direction.
    • Supports both direct string comparison and regular expressions.
    • If a path is provided, the comparison is made against the nested value.
  • Parameters:
    • searchStringOrRegex:
      • Type: string | RegExp
      • Required: Yes
      • Description: The term or pattern to search for in each element (or at the specified path).
    • direction:
      • Type: 'asc' | 'desc'
      • Required: Yes
      • Description: Defines the sort order: ascending or descending based on match priority.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested string field on which to apply the search.
  • Returns:
    • any[]: A sorted array where items matching the search term/pattern are prioritized based on the specified direction. Returns !error if the input is not an array or if direction is not specified.
  • Example 1: Sort by string match, ascending
    • {{ fruits | sortIncludes: 'a': 'asc' }}
    • Output: ['Banana', 'Apple', 'Strawberry'] (if fruits = ['Banana', 'Strawberry', 'Apple'])
  • Example 2: Sort objects by nested field
    • {{ items | sortIncludes: 'a': 'asc': 'name' }}
    • Output: [{ name: 'carrot' }, { name: 'apple' }, { name: 'pear' }] (if items = [{ name: 'carrot' }, { name: 'pear' }, { name: 'apple' }])
  • Notes:
    • Sorting is based on whether the value includes the search term or matches the regex.
    • When using a path, non-valid paths may be ignored.

sortObjectsBySize

  • Usage Syntax:
    • {{ inputArray | sortObjectsBySize: 'asc': 'propertyKey' }}
    • {{ inputArray | sortObjectsBySize: 'desc': 'propertyKey' }}
  • Evaluates to: any[]
  • Description: The sortObjectsBySize pipe sorts an array of objects by t-shirt size values (xxs, xs, s, m, l, xl, xxl) at a specified property key.
    • Specialized pipe for sorting by standard clothing/product sizes.
    • Recognizes size order: xxs < xs < s < m < l < xl < xxl.
    • Useful for:
      • Displaying product variants in size order.
      • Organizing inventory by size.
      • Sorting apparel options for display.
  • Parameters:
    • order:
      • Type: string
      • Required: Yes
      • Description: Sort direction - either 'asc' (ascending, smallest to largest) or 'desc' (descending, largest to smallest).
    • propertyKey:
      • Type: string
      • Required: Yes
      • Description: The property name (key) containing the size value. This is a single-level key, not a nested path.
  • Returns:
    • any[]: A new array sorted by the size values at the specified property key.
  • Example 1: Sort in ascending order
    • {{ sizeArray | sortObjectsBySize: 'asc': 'size' }}
    • Output: [{ size: 's' }, { size: 'm' }, { size: 'xl' }]
  • Example 2: Sort in descending order
    • {{ products | sortObjectsBySize: 'desc': 'availableSize' }}
    • Output: [{ availableSize: 'xxl' }, { availableSize: 'l' }, { availableSize: 'xs' }]
  • Example 3: Sort product variants
    • {{ variants | sortObjectsBySize: 'asc': 'variantSize' }}
    • Output: Variants ordered from smallest to largest size
  • Notes:
    • Only recognizes standard t-shirt sizes: xxs, xs, s, m, l, xl, xxl.
    • Property key must be a direct property of each object (not a nested path).
    • Returns a new sorted array; does not mutate the original.
    • Case sensitivity may apply depending on implementation.

sortSize

  • Usage Syntax:
    • {{ inputArray | sortSize }}
    • {{ inputArray | sortSize: 'asc' }}
    • {{ inputArray | sortSize: 'desc' }}
  • Evaluates to: string[]
  • Description: The sortSize pipe sorts an array of t-shirt size strings (xxs, xs, s, m, l, xl, xxl) in ascending or descending order.
    • Specialized pipe for sorting size strings directly.
    • Recognizes size order: xxs < xs < s < m < l < xl < xxl.
    • Input is an array of size strings, not objects.
    • Useful for:
      • Organizing size filter options.
      • Displaying available sizes in order.
      • Sorting size selection dropdowns.
  • Parameters:
    • order:
      • Type: string
      • Required: No
      • Description: Sort direction - either 'asc' (ascending, smallest to largest) or 'desc' (descending, largest to smallest). Defaults to 'asc' if not provided.
  • Returns:
    • string[]: A new array of size strings sorted in the specified order.
  • Example 1: Sort in ascending order (default)
    • {{ ['xl', 's', 'm', 'xs'] | sortSize }}
    • Output: ['xs', 's', 'm', 'xl']
  • Example 2: Sort in descending order
    • {{ ['s', 'xxl', 'm', 'xs'] | sortSize: 'desc' }}
    • Output: ['xxl', 'm', 's', 'xs']
  • Example 3: Sort available sizes
    • {{ availableSizes | sortSize: 'asc' }}
    • Output: Sizes ordered from smallest to largest
  • Notes:
    • Only recognizes standard t-shirt sizes: xxs, xs, s, m, l, xl, xxl.
    • Input must be an array of size strings (not objects).
    • Returns a new sorted array; does not mutate the original.
    • Very specific use case for apparel/product size ordering.

filterIsEqualTo

  • Usage Syntax:
    • {{ inputArray | filterIsEqualTo: comparison }}
    • {{ inputArray | filterIsEqualTo: comparison: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIsEqualTo pipe filters an input array, retaining only those elements that are equal to a provided comparison value.
    • When no path is provided, the comparison is made directly against the array elements.
    • If a path is given, the comparison is performed on the value at that nested path.
    • Uses strict equality (===) for comparison.
  • Parameters:
    • comparison:
      • Type: any
      • Required: Yes
      • Description: The value to compare each element (or nested field) against.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional nested path to a field to apply the comparison on.
  • Returns:
    • any[]: A filtered array containing only the elements that are strictly equal to the comparison value (or contain it at the specified path).
  • Example 1: Filter primitives
    • {{ numbers | filterIsEqualTo: 2 }}
    • Output: [2, 2] (if numbers = [1, 2, 3, 2])
  • Example 2: Filter by value in nested property
    • {{ users | filterIsEqualTo: 'Alice': 'name' }}
    • Output: [{ name: 'Alice' }] (if users = [{ name: 'Alice' }, { name: 'Bob' }])
  • Notes:
    • If a path is used, it must resolve to a comparable primitive.
    • Uses strict equality (no coercion).

filterIsNotEqualTo

  • Usage Syntax:
    • {{ inputArray | filterIsNotEqualTo: comparison }}
    • {{ inputArray | filterIsNotEqualTo: comparison: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIsNotEqualTo pipe filters an input array, removing elements that match the given comparison value. Only elements that do not match the value (or the value at the given path) are retained.
    • Uses strict inequality (!==) for comparison.
    • If a path is specified, the comparison is applied to the nested value at that path.
  • Parameters:
    • comparison:
      • Type: any
      • Required: Yes
      • Description: The value to compare each element (or nested value) against.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested property on which to apply the comparison.
  • Returns:
    • any[]: A filtered array of elements that do not equal the specified comparison value (using strict inequality).
  • Example 1: Filter out a primitive value
    • {{ numbers | filterIsNotEqualTo: 2 }}
    • Output: [1, 3] (if numbers = [1, 2, 3, 2])
  • Example 2: Filter out by nested field
    • {{ users | filterIsNotEqualTo: 'Alice': 'name' }}
    • Output: [{ name: 'Bob' }] (if users = [{ name: 'Alice' }, { name: 'Bob' }])
  • Notes:
    • Uses strict inequality comparison (!==) - no coercion is applied.
    • If a path is provided, the pipe compares the value found at that path.

filterIsGreaterThan

  • Usage Syntax:
    • {{ inputArray | filterIsGreaterThan: comparison }}
    • {{ inputArray | filterIsGreaterThan: comparison: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIsGreaterThan pipe filters an input array, retaining only the elements that are strictly greater than the specified comparison value.
    • If a path is provided, the comparison is applied to the nested numeric value at that path.
    • Uses the > operator (strict greater-than).
  • Parameters:
    • comparison:
      • Type: number
      • Required: Yes
      • Description: The value to compare each element (or nested field) against.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested numeric property to evaluate.
  • Returns:
    • any[]: A filtered array containing only the elements with values (or nested values) greater than the comparison number.
  • Example 1: Filter primitives
    • {{ numbers | filterIsGreaterThan: 4 }}
    • Output: [5, 10] (if numbers = [1, 5, 10, 3])
  • Example 2: Filter objects by nested numeric field
    • {{ tests | filterIsGreaterThan: 80: 'score' }}
    • Output: [{ score: 90 }] (if tests = [{ score: 75 }, { score: 90 }])
  • Notes:
    • Uses strict greater-than comparison (>).
    • Non-numeric values at the path or root will result in exclusion or !error.

filterIsLessThan

  • Usage Syntax:
    • {{ inputArray | filterIsLessThan: comparison }}
    • {{ inputArray | filterIsLessThan: comparison: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIsLessThan pipe filters an input array, retaining only the elements that are strictly less than the specified comparison value.
    • If a path is provided, the comparison is applied to the nested numeric value at that path.
    • Uses the < operator (strict less-than).
  • Parameters:
    • comparison:
      • Type: number
      • Required: Yes
      • Description: The numeric value to compare each element (or nested field) against.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested numeric property to evaluate.
  • Returns:
    • any[]: A filtered array containing elements whose value (or nested value) is less than the comparison number.
  • Example 1: Filter primitives
    • {{ numbers | filterIsLessThan: 5 }}
    • Output: [1, 3] (if numbers = [1, 5, 10, 3])
  • Example 2: Filter objects by nested field
    • {{ products | filterIsLessThan: 50: 'price' }}
    • Output: [{ price: 30 }] (if products = [{ price: 30 }, { price: 75 }])
  • Notes:
    • Uses strict less-than comparison (<).
    • Non-numeric values at the path or root will result in exclusion or !error.

filterIsGreaterThanOrEqualTo

  • Usage Syntax:
    • {{ inputArray | filterIsGreaterThanOrEqualTo: comparison }}
    • {{ inputArray | filterIsGreaterThanOrEqualTo: comparison: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIsGreaterThanOrEqualTo pipe filters an input array, retaining only the elements that are greater than or equal to the specified numeric comparison value.
    • Applies the >= operator to determine inclusion.
    • If a path is provided, it targets a nested numeric field within each element.
  • Parameters:
    • comparison:
      • Type: number
      • Required: Yes
      • Description: The numeric threshold to compare against.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested numeric property to evaluate.
  • Returns:
    • any[]: A filtered array containing elements whose value (or nested value) is greater than or equal to the comparison number.
  • Example 1: Compare against primitives
    • {{ [2, 4, 6, 8] | filterIsGreaterThanOrEqualTo: 6 }}
    • Output: [6, 8]
  • Example 2: Compare nested numeric field
    • {{ articles | filterIsGreaterThanOrEqualTo: 100: 'views' }}
    • Output: [{ views: 100 }, { views: 200 }] (if articles = [{ views: 100 }, { views: 200 }, { views: 50 }])
  • Notes:
    • Comparison uses >= and requires numeric input.
    • Works on root values or nested fields, depending on whether a path is provided.

filterIsLessThanOrEqualTo

  • Usage Syntax:
    • {{ inputArray | filterIsLessThanOrEqualTo: comparison }}
    • {{ inputArray | filterIsLessThanOrEqualTo: comparison: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIsLessThanOrEqualTo pipe filters an input array, retaining only the elements that are less than or equal to the specified numeric comparison value.
    • Applies the <= operator to determine inclusion.
    • If a path is provided, it targets a nested numeric field within each element.
  • Parameters:
    • comparison:
      • Type: number
      • Required: Yes
      • Description: The numeric value to compare each element (or nested field) against.
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested property to apply the comparison to.
  • Returns:
    • any[]: A filtered array of elements where the value (or nested value) is less than or equal to the comparison value.
  • Example 1: Filtering primitive numbers
    • {{ [5, 10, 15, 20] | filterIsLessThanOrEqualTo: 15 }}
    • Output: [5, 10, 15]
  • Example 2: Filtering by nested field
    • {{ inventory | filterIsLessThanOrEqualTo: 5: 'qty' }}
    • Output: [{ qty: 2 }, { qty: 5 }] (if inventory = [{ qty: 2 }, { qty: 5 }, { qty: 8 }])
  • Notes:
    • Uses strict <= comparison.
    • Path-based access must resolve to a numeric value to be evaluated.

filterByIndexModulo

  • Usage Syntax: {{ inputArray | filterByIndexModulo: operand: comparison }}
  • Evaluates to: any[]
  • Description: The filterByIndexModulo pipe filters an input array by applying a modulo operation on each element's index. It retains only the elements whose index modulo operand is equal to the given comparison.
    • Ideal for selecting every nth element, alternating entries, or even/odd index filtering.
    • Does not examine the array values - only their index positions.
  • Parameters:
    • operand:
      • Type: number
      • Required: Yes
      • Description: The divisor to apply using the modulo operation.
    • comparison:
      • Type: number
      • Required: Yes
      • Description: The expected result of index % operand.
  • Returns:
    • any[]: A filtered array containing elements whose index modulo the operand equals the comparison.
  • Example 1: Keep only even-indexed elements
    • {{ simpleArray | filterByIndexModulo: 2: 0 }}
    • Output: ['foo', 'A', 'C', 'E', 'G'] (if simpleArray = ['foo', 'bar', 'A', 'B', 'C', 'D', 'E', 'F', 'G'])
  • Example 2: Keep odd-indexed elements
    • {{ list | filterByIndexModulo: 2: 1 }}
    • Output: elements at index 1, 3, 5, ...
  • Notes:
    • This pipe does not inspect values, only their index in the array.
    • operand can be less than zero.

filterByIndexModuloNot

  • Usage Syntax: {{ inputArray | filterByIndexModuloNot: operand: comparison }}
  • Evaluates to: any[]
  • Description: The filterByIndexModuloNot pipe filters an input array by excluding elements whose index modulo the given operand is equal to the specified comparison.
    • Useful when you want to remove every nth item, odd/even indexed values, or alternate patterns.
    • Operates purely on index position, not on the array's values.
  • Parameters:
    • operand:
      • Type: number
      • Required: Yes
      • Description: The divisor used in the modulo operation.
    • comparison:
      • Type: number
      • Required: Yes
      • Description: The value to exclude when index % operand === comparison.
  • Returns:
    • any[]: A filtered array that excludes elements whose index modulo the operand equals the comparison value.
  • Example 1: Remove even-indexed elements
    • {{ simpleArray | filterByIndexModuloNot: 2: 0 }}
    • Output: ['bar', 'B', 'D', 'F'] (if simpleArray = ['foo', 'bar', 'A', 'B', 'C', 'D', 'E', 'F', 'G'])
  • Example 2: Remove odd-indexed items
    • {{ values | filterByIndexModuloNot: 2: 1 }}
    • Output: keeps items at even indexes
  • Notes:
    • Operates on index-based logic only - not value contents.
    • Opposite logic of filterByIndexModulo.

filterEndsWith

  • Usage Syntax: {{ inputArray | filterEndsWith: 'suffix': 'path': 'to': 'property' }}
  • Evaluates to: any[]
  • Description: The filterEndsWith pipe filters an array of objects, returning only items where the value at the specified path ends with the given suffix string.
    • Uses JavaScript's endsWith() method for string matching.
    • Case-sensitive comparison.
    • Useful for:
      • Filtering products by name suffix.
      • Finding items with specific file extensions.
      • Selecting entries with matching string endings.
  • Parameters:
    • suffix:
      • Type: string
      • Required: Yes
      • Description: The suffix string to match at the end of property values.
    • ...path:
      • Type: string[]
      • Required: Yes
      • Description: One or more keys to access the string property to test.
  • Returns:
    • any[]: Array of objects where the property at the specified path ends with the suffix.
  • Example 1: Filter products by name ending
    • {{ products | filterEndsWith: 'Premium': 'title' }}
    • Output: [{ title: 'Gold Premium' }, { title: 'Silver Premium' }]
  • Example 2: Filter by file extension
    • {{ files | filterEndsWith: '.pdf': 'filename' }}
    • Output: [{ filename: 'report.pdf' }, { filename: 'invoice.pdf' }]
  • Example 3: Nested property path
    • {{ items | filterEndsWith: 'Ltd': 'company': 'name' }}
    • Output: [{ company: { name: 'Acme Ltd' } }]
  • Notes:
    • Case-sensitive matching (e.g., 'premium' does not match 'Premium').
    • The property at the specified path must be a string.
    • Items where the path does not resolve are excluded from results.

filterStartsWith

  • Usage Syntax: {{ inputArray | filterStartsWith: 'prefix': 'path': 'to': 'property' }}
  • Evaluates to: any[]
  • Description: The filterStartsWith pipe filters an array of objects, returning only items where the value at the specified path starts with the given prefix string.
    • Uses JavaScript's startsWith() method for string matching.
    • Case-sensitive comparison.
    • Useful for:
      • Filtering by name prefixes.
      • Finding items with specific category codes.
      • Selecting entries with matching string beginnings.
  • Parameters:
    • prefix:
      • Type: string
      • Required: Yes
      • Description: The prefix string to match at the beginning of property values.
    • ...path:
      • Type: string[]
      • Required: Yes
      • Description: One or more keys to access the string property to test.
  • Returns:
    • any[]: Array of objects where the property at the specified path starts with the prefix.
  • Example 1: Filter products by name prefix
    • {{ products | filterStartsWith: 'Pro': 'title' }}
    • Output: [{ title: 'Pro Edition' }, { title: 'Professional Suite' }]
  • Example 2: Filter by category code
    • {{ items | filterStartsWith: 'CAT-': 'sku' }}
    • Output: [{ sku: 'CAT-001' }, { sku: 'CAT-042' }]
  • Example 3: Nested property path
    • {{ users | filterStartsWith: 'admin': 'profile': 'role' }}
    • Output: [{ profile: { role: 'admin_user' } }]
  • Notes:
    • Case-sensitive matching (e.g., 'pro' does not match 'Pro').
    • The property at the specified path must be a string.
    • Items where the path does not resolve are excluded from results.

filterIncludes

  • Usage Syntax:
    • {{ inputArray | filterIncludes: 'searchString' }}
    • {{ inputArray | filterIncludes: /regex/: 'path': 'to': 'field' }}
  • Evaluates to: any[]
  • Description: The filterIncludes pipe filters an input array, retaining only elements that contain the provided string or match the provided regular expression.
    • If no path is provided, the comparison is made directly against the element itself.
    • If a path is given, the comparison is applied to the nested string value at that path.
  • Parameters:
    • searchString:
      • Type: string | RegExp
      • Required: Yes
      • Description: A substring or pattern to match against each element (or path-resolved value).
    • ...path:
      • Type: string[]
      • Required: No
      • Description: Optional path to a nested field to apply the search on.
  • Returns:
    • any[]: A filtered array of elements that match the given string or regex - either directly or at the specified path. Returns !error if the parameter is not a string or regex.
  • Example 1: Match string elements containing 'a'
    • {{ ['apple', 'banana', 'cherry'] | filterIncludes: 'a' }}
    • Output: ['apple', 'banana']
  • Example 3: Match against nested property
    • {{ people | filterIncludes: 'a': 'name' }}
    • Output: [{ name: 'Anna' }, { name: 'Bella' }] (if people = [{ name: 'Anna' }, { name: 'Bella' }, { name: 'Chris' }])
  • Notes:
    • Matching is case-sensitive for strings by default; use regex for case-insensitive searches.

createArray

  • Usage Syntax: {{ inputValue | createArray }}
  • Evaluates to: any[]
  • Description: The createArray pipe takes the input value and wraps it in an array.
    • Creates a single-element array containing the input value.
    • Does not support creating arrays with multiple items.
    • Useful for:
      • Converting a single value into array format for compatibility with array-processing pipes.
      • Normalizing data structure before iteration.
  • Parameters: This pipe does not accept additional parameters.
  • Returns:
    • any[]: An array containing the input value as its single element.
  • Example 1: Wrapping a string
    • {{ 'hello' | createArray }}
    • Output: ['hello']
  • Example 2: Wrapping a number
    • {{ 42 | createArray }}
    • Output: [42]
  • Example 3: Wrapping an object
    • {{ user | createArray }}
    • Output: [{ name: 'Alice', age: 30 }] (if user = { name: 'Alice', age: 30 })
  • Notes:
    • Always creates a single-element array regardless of input type.
    • Cannot be used to create multi-element arrays directly.
    • Useful for ensuring consistent array format in pipelines.

pushArray

  • Usage Syntax: {{ inputArray | pushArray: value }}
  • Evaluates to: any[]
  • Description: The pushArray pipe adds a single element to the end of an array and returns a new array.
    • Returns a new array without mutating the original (immutable operation).
    • Adds the element to the end of the array.
    • Useful for:
      • Dynamically adding items to lists.
      • Building arrays incrementally in templates.
      • Appending values without side effects.
  • Parameters:
    • value:
      • Type: any
      • Required: Yes
      • Description: The value to add to the end of the array.
  • Returns:
    • any[]: A new array with the value appended to the end.
  • Example 1: Add number to array
    • {{ [1, 2, 3] | pushArray: 4 }}
    • Output: [1, 2, 3, 4]
  • Example 2: Add string to array
    • {{ ['apple', 'banana'] | pushArray: 'orange' }}
    • Output: ['apple', 'banana', 'orange']
  • Example 3: Add object to array
    • {{ products | pushArray: newProduct }}
    • Output: [...products, newProduct]
  • Notes:
    • Returns a new array; does not mutate the original.
    • Only adds a single element per operation.
    • For adding multiple elements, chain multiple pushArray operations or use array concatenation.

toggleArray

  • Usage Syntax: {{ inputArray | toggleArray: value }}
  • Evaluates to: any[]
  • Description: The toggleArray pipe toggles the presence of a value in an array. If the value exists in the array, it is removed. If it does not exist, it is added to the end.
    • Uses array.includes() to check for existence.
    • Uses strict equality (===) for matching and filtering.
    • Only works with arrays of primitive values (strings, numbers, booleans).
    • Useful for:
      • Managing selection states in UI.
      • Toggle functionality for tags or filters.
      • Adding/removing items from active lists.
  • Parameters:
    • value:
      • Type: any (primitive)
      • Required: Yes
      • Description: The value to toggle in the array.
  • Returns:
    • any[]: A new array with the value either added (if it wasn't present) or removed (if it was present).
  • Example 1: Remove existing value
    • {{ ['a', 'b', 'c'] | toggleArray: 'b' }}
    • Output: ['a', 'c']
  • Example 2: Add non-existing value
    • {{ ['a', 'c'] | toggleArray: 'b' }}
    • Output: ['a', 'c', 'b']
  • Example 3: Toggle in empty array
    • {{ [] | toggleArray: 'first' }}
    • Output: ['first']
  • Example 4: Toggle number
    • {{ [1, 2, 3] | toggleArray: 2 }}
    • Output: [1, 3]
  • Notes:
    • Only works with primitive values (strings, numbers, booleans).
    • Two objects with identical properties are NOT considered equal.
    • Uses strict equality (===) for comparison.
    • Returns a new array; does not mutate the original.

arrayLength

  • Usage Syntax: {{ inputArray | arrayLength }}
  • Evaluates to: number
  • Description: The arrayLength pipe returns the total number of elements in the input array. It is equivalent to accessing the .length property of an array in JavaScript.
    • Useful for size checks, conditional display logic, or value-driven rendering.
    • Returns 0 for empty arrays.
    • Returns !error if the input is not an array.
  • Parameters: This pipe does not accept additional parameters.
  • Returns:
    • number: The number of elements in the input array.
  • Example 1: Length of a simple array
    • {{ ['a', 'b', 'c'] | arrayLength }}
    • Output: 3
  • Example 2: Invalid input
    • {{ 'not-an-array' | arrayLength }}
    • Output: !error
  • Notes:
    • Returns !error if the input is not a valid array.
    • Useful for pagination, display counts, or summary fields.

slice

  • Usage Syntax:
    • {{ inputArray | slice: start }}
    • {{ inputArray | slice: start: end }}
  • Evaluates to: any[]
  • Description: The slice pipe extracts a section of an array and returns it as a new array without modifying the original. The section is defined by start and optionally end indices.
    • Mimics the behavior of JavaScript's Array.prototype.slice().
    • Negative indices count backward from the end of the array.
  • Parameters:
    • start:
      • Type: number
      • Required: Yes
      • Description: The index at which to begin extraction (inclusive). Negative values indicate offset from the end.
    • end:
      • Type: number
      • Required: No
      • Description: The index at which to end extraction (exclusive). If omitted, extraction continues to the end of the array.
  • Returns:
    • any[]: A shallow-copied subarray from the original, using the start and optional end indices.
  • Example 1: Slice from index 2 onward
    • {{ [0, 1, 2, 3, 4] | slice: 2 }}
    • Output: [2, 3, 4]
  • Example 2: Slice from index 1 to index 4 (exclusive)
    • {{ ['a', 'b', 'c', 'd', 'e'] | slice: 1: 4 }}
    • Output: ['b', 'c', 'd']
  • Example 3: Using negative index
    • {{ ['x', 'y', 'z'] | slice: -2 }}
    • Output: ['y', 'z']
  • Notes:
    • The original array is not mutated.
    • Negative indices count from the end (e.g., -1 refers to the last item).
    • Useful for pagination, previews, or limiting visible list items.

chunk

  • Usage Syntax: {{ inputArray | chunk: chunkSize }}
  • Evaluates to: any[][]
  • Description: The chunk pipe takes an input array and splits it into a new array of subarrays, each of length chunkSize (except possibly the last one).
    • Useful for grouping data into rows, pages, or columns in UIs.
  • Parameters:
    • chunkSize:
      • Type: number
      • Required: Yes
      • Description: The number of elements per chunked subarray. Must be > 0.
  • Returns:
    • any[][]: An array of chunked arrays, each with a maximum length of chunkSize.
  • Example 1: Chunk array into pairs
    • {{ simpleArray | chunk: 2 }}
    • Output: [['foo', 'bar'], ['A', 'B'], ['C', 'D'], ['E', 'F'], ['G']] (if simpleArray = ['foo', 'bar', 'A', 'B', 'C', 'D', 'E', 'F', 'G'])
  • Example 2: Invalid chunk size
    • {{ ['a', 'b', 'c'] | chunk: 0 }}
    • Output: !error
  • Notes:
    • chunkSize must be a positive integer.
    • If chunkSize is larger than the array, the result will be a single subarray.

includes

  • Usage Syntax: {{ inputArray | includes: match }}
  • Evaluates to: boolean
  • Description: The includes pipe returns true if any element in the input array is strictly equal to the provided match value. Otherwise, it returns false.
    • Uses strict equality (===) for comparison.
    • Stops at the first match for efficiency.
  • Parameters:
    • match:
      • Type: any
      • Required: Yes
      • Description: The value to check for within the array.
  • Returns:
    • boolean: true if at least one element in the array strictly equals the match; otherwise false.
  • Example 1: Matching a string
    • {{ ['a', 'b', 'c'] | includes: 'b' }}
    • Output: true
  • Example 2: No match
    • {{ [1, 2, 3] | includes: 4 }}
    • Output: false
  • Notes:
    • Comparison is strict - types must match.
    • If the array is empty or undefined, the result will be false.

findIndex

  • Usage Syntax: {{ inputArray | findIndex: value }}
  • Evaluates to: number
  • Description: The findIndex pipe finds the index of a specified value in an array using strict equality (===) comparison.
    • Returns the index position of the first matching element.
    • Returns -1 if the value is not found in the array.
    • Uses strict equality for matching.
    • Useful for:
      • Locating items in arrays.
      • Checking if a value exists and getting its position.
      • Index-based array operations.
  • Parameters:
    • value:
      • Type: any
      • Required: Yes
      • Description: The value to search for in the array.
  • Returns:
    • number: The index of the first occurrence of the value, or -1 if not found.
  • Example 1: Find number in array
    • {{ [10, 20, 30] | findIndex: 20 }}
    • Output: 1
  • Example 2: Value not found
    • {{ [10, 20, 30] | findIndex: 40 }}
    • Output: -1
  • Example 3: Find string in array
    • {{ ['apple', 'banana', 'orange'] | findIndex: 'banana' }}
    • Output: 1
  • Notes:
    • Uses strict equality (===) for comparison.
    • Returns the index of the first match only.
    • Returns -1 if no match is found (standard JavaScript behavior).
    • For arrays of objects, consider using findIndexArrObj instead.

findIndexArrObj

  • Usage Syntax: {{ inputArray | findIndexArrObj: value: 'key' }}
  • Evaluates to: number
  • Description: The findIndexArrObj pipe finds the index of an object in an array where the specified property key matches the given value.
    • Searches for the first object with a matching property value.
    • Returns -1 if no matching object is found.
    • Key must be a direct property (not a nested path).
    • Useful for:
      • Finding objects by ID or unique identifier.
      • Locating items in arrays of objects.
      • Index-based object array operations.
  • Parameters:
    • value:
      • Type: any
      • Required: Yes
      • Description: The value to match against the specified property.
    • key:
      • Type: string
      • Required: Yes
      • Description: The property name to check. Must be a direct property (not a nested path).
  • Returns:
    • number: The index of the first matching object, or -1 if not found.
  • Example 1: Find user by email
    • {{ users | findIndexArrObj: '[email protected]': 'email' }}
    • Output: 2 (if the user is at index 2)
  • Example 2: Find product by ID
    • {{ products | findIndexArrObj: 'prod-123': 'id' }}
    • Output: 0 (if the product is the first item)
  • Example 3: Value not found
    • {{ items | findIndexArrObj: 'missing': 'key' }}
    • Output: -1
  • Notes:
    • Key parameter must be a single-level property name (not a nested path like 'profile.email').
    • Returns the index of the first matching object only.
    • Returns -1 if no match is found.
    • Uses standard equality comparison for the property value.

unique

  • Usage Syntax: {{ inputArray | unique }}
  • Evaluates to: (string | number | boolean)[]
  • Description: The unique pipe removes duplicate primitive values from an array and returns a new array with only the first occurrence of each value.
    • Works only on arrays of primitive types: string, number, or boolean.
    • The order of the first occurrence is preserved.
  • Parameters: This pipe does not accept additional parameters.
  • Returns:
    • (string | number)[]  A new array with duplicate values removed. Returns !error if input is not a primitive array.
  • Example 1: Removing duplicate numbers
    • {{ [1, 2, 2, 3, 1] | unique }}
    • Output: [1, 2, 3]
  • Example 2: Objects are not supported
    • {{ [{ id: 1 }, { id: 1 }] | unique }}
    • Output: !error
  • Notes:
    • Only supports primitive values - objects, arrays, and functions are not deduplicated.

flat

  • Usage Syntax: {{ inputArray | flat }}
  • Evaluates to: any[]
  • Description: The flat pipe takes an array that may include sub-arrays and flattens it into a single-level array. It performs shallow flattening, meaning only one level of nesting is removed.
    • Mimics the behavior of JavaScript's Array.prototype.flat(1).
  • Parameters: This pipe does not accept additional parameters.
  • Returns:
    • any[]: A flattened array with one level of nesting removed.
  • Example 1: Flattening one level of nested arrays
    • {{ [0, 1, [2, 3]] | flat }}
    • Output: [0, 1, 2, 3]
  • Example 2: Deeply nested arrays
    • {{ [1, [2, [3]]] | flat }}
    • Output: [1, 2, [3]]
  • Notes:
    • Only one level of nested arrays is flattened.
    • Does not recursively flatten deeply nested arrays.


Did this answer your question?