Array Filters in Xano: - Complete Walkthrough

Working with arrays is a common task in application development, and Xano provides a powerful set of array filters to simplify this process. In this guide, we'll explore the various array filters available in Xano and show you how to use them effectively.

Append: Add Elements to the End of an Array

The append filter allows you to add a new element to the end of an existing array. Here's how to use it:

1. In your function stack, locate the array you want to modify.
2. Apply the append filter to the array.
3. In the filter options, enter the value you want to append to the end of the array.

You can also use the path option to update a specific value at a given path inside an array of objects.

// Example
[1, 2, 3, 4] -> append(10) -> [1, 2, 3, 4, 10]

Count: Get the Number of Items in an Array

The count filter simply returns the number of items in an array. It's a straightforward filter with no additional options.

// Example
[1, 2, 3, 4] -> count() -> 4

Diff: Find Entries Not Present in Another Array

The diff filter returns the entries from the first array that are not present in the second array. It compares the values of the arrays for matching.

// Example
[1, 2, 3, 4] -> diff([3, 4, 5, 6]) -> [1, 2]

Entries: Split Objects into Key-Value Pairs

The entries filter takes an array or object and splits it into separate key-value pairs, returning an array of objects with separate keys and values. This can be useful when you need to construct your own objects based on an API response.

// Example
{ name: 'John', age: 30 } -> entries() -> [{ key: 'name', value: 'John' }, { key: 'age', value: 30 }]

Every: Check if All Elements Match a Condition

The every filter allows you to leverage a lambda function (custom JavaScript code) against an array. It returns true if all elements in the array match the provided condition, and false otherwise.

// Example
[{ price: 10 }, { price: 50 }] -> every(element => element.price > 10) -> false
[{ price: 20 }, { price: 30 }] -> every(element => element.price > 10) -> true

Filter: Create a New Array with Elements that Match a Condition

Similar to the every filter, the filter filter allows you to use a lambda function to create a new array containing only the elements that qualify as true based on the provided condition.

// Example
[{ price: 10 }, { price: 50 }] -> filter(element => element.price > 10) -> [{ price: 50 }]

Some: Check if At Least One Element Matches a Condition

The some filter determines if at least one element in the array evaluates as true based on the provided lambda function.

// Example
[{ price: 10 }, { price: 5 }] -> some(element => element.price > 10) -> true
[{ price: 5 }, { price: 8 }] -> some(element => element.price > 10) -> false

Map: Transform Elements of an Array

The map filter uses a lambda function to transform the elements of an array into a new format. This is particularly useful when you need to perform quick transformations on an array of objects.

// Example
[{ email: '[email protected]' }, { email: '[email protected]' }] -> map(element => element.email) -> ['[email protected]', '[email protected]']

Reduce: Reduce an Array to a Single Value

The reduce filter takes an array and reduces it to a single result using a lambda function. A common use case is to calculate the sum of values in an array.

// Example
[{ price: 10 }, { price: 50 }] -> reduce(0, (result, element) => result + element.price) -> 60

Find: Find the First Element that Matches a Condition

The find filter returns the first element in the array that evaluates as true based on the provided lambda function.

// Example
[{ price: 10 }, { price: 50 }] -> find(element => element.price > 10) -> { price: 50 }

FindIndex: Find the Index of the First Element that Matches a Condition

The findIndex filter returns the index of the first element in the array that evaluates as true based on the provided lambda function.

// Example
[{ price: 10 }, { price: 50 }] -> findIndex(element => element.price > 10) -> 1

FilterEmpty: Remove Empty Entries from an Array

The filterEmpty filter returns a new array with entries that are not empty (e.g., null, empty arrays, empty objects, or blank strings). You can also specify a path option to filter out empty values within objects.

// Example
[1, 2, '', 4] -> filterEmpty() -> [1, 2, 4]
[{ name: 'John', age: null }, { name: 'Jane', age: 30 }] -> filterEmpty('age') -> [{ name: 'Jane', age: 30 }]

First: Get the First Entry of an Array

The first filter returns the very first entry in an array.

// Example
[1, 2, 3, 4] -> first() -> 1

Flatten: Flatten a Multi-Level Array

The flatten filter takes an array with multiple levels and transforms it into a single-level array.

// Example
[1, 2, [3, 4], 5] -> flatten() -> [1, 2, 3, 4, 5]

Intersect: Find Entries Present in Another Array

The intersect filter is similar to the diff filter, but instead of returning values not present in the second array, it returns values that are present in both arrays.

// Example
[1, 2, 3, 4] -> intersect([3, 4, 5, 6]) -> [3, 4]

Join: Transform an Array into a Text String

The join filter takes an array and transforms it into a text string, using a specified separator between each element.

// Example
[1, 2, 3, 4] -> join(',') -> '1,2,3,4'
[1, 2, 3, 4] -> join(':') -> '1:2:3:4'

Keys: Get the Keys of an Object as an Array

The keys filter takes an object and returns its keys as a new array.

// Example
{ name: 'John', age: 30 } -> keys() -> ['name', 'age']

Last: Get the Last Entry of an Array

The last filter returns the last entry in an array.

// Example
[1, 2, 3, 4] -> last() -> 4

Merge and MergeRecursive: Merge Arrays Together

The merge and mergeRecursive filters merge two or more arrays together. The merge filter only works with the first level of an array, while mergeRecursive merges values at all levels.

// Example
[1, 2] -> merge([3, 4]) -> [1, 2, 3, 4]
[1, [2, 3]] -> mergeRecursive([4, [5, 6]]) -> [1, 2, 3, 4, 5, 6]

Unique: Get the Unique Values of an Array

The unique filter returns the unique values of an array, removing any duplicates.

// Example
[1, 2, 3, 4, 3, 4, 5, 6] -> unique() -> [1, 2, 3, 4, 5, 6]

Pop: Remove and Return the Last Element of an Array

The pop filter takes the last element of the array and returns it, modifying the original array.

// Example
[1, 2, 3, 4] -> pop() -> 4 (Original array becomes [1, 2, 3])

Prepend: Add an Element to the Beginning of an Array

The prepend filter pushes an element to the beginning of an array and returns the updated array.

// Example
[1, 2, 3, 4] -> prepend(10) -> [10, 1, 2, 3, 4]

Push: Add an Element to the End of an Array

The push filter adds an element to the end of an array and returns the new array.

// Example
[1, 2, 3, 4] -> push(99) -> [1, 2, 3, 4, 99]

Range: Create an Array of Values Between a Range

The range filter returns an array of values between the specified range.

// Example
range(2, 4) -> [2, 3, 4]

Remove: Remove Elements from an Array

The remove filter removes any elements from the array that match the provided value. You can also specify a path option to remove values within objects, and an enforceStrictType option to enforce strict type matching.

// Example
[1, 2, 3, 4] -> remove(2) -> [1, 3, 4]
[{ name: 'John', age: 30 }, { name: 'Jane', age: null }] -> remove(null, 'age', true) -> [{ name: 'John', age: 30 }]

Reverse: Reverse the Order of an Array

The reverse filter reverses the order of the elements in an array.

// Example
[1, 2, 3, 4] -> reverse() -> [4, 3, 2, 1]

SafeArray: Guarantee an Array Response

The safeArray filter ensures that the result is always an array, even if the input is not an array.

// Example
'hello' -> safeArray() -> ['hello']

Shift: Remove and Return the First Element of an Array

The shift filter takes the first value of an array and returns it, modifying the original array.

// Example
[1, 2, 3, 4] -> shift() -> 1 (Original array becomes [2, 3, 4])

Shuffle: Shuffle the Elements of an Array

The shuffle filter shuffles the entries in an array and returns the result.

// Example
[1, 2, 3, 4] -> shuffle() -> [3, 1, 4, 2] (Order may vary)

Slice: Extract a Section from an Array

The slice filter extracts a section from an array based on the provided start index and length.

// Example
[1, 2, 3, 4] -> slice(1, 2) -> [2, 3]

Sort: Sort an Array

The sort filter allows you to sort an array based on various options. You can specify a path option to sort by a specific value within objects, a sortingType option (number, text, natural), and an order option (ascending or descending).

// Example
[{ age: 30 }, { age: 20 }, { age: 40 }] -> sort('age', 'number', 'ascending') -> [{ age: 20 }, { age: 30 }, { age: 40 }]

Unshift: Add an Element to the Beginning of an Array

The unshift filter pushes an element to the beginning of the array and returns the new array.

// Example
[1, 2, 3, 4] -> unshift(99) -> [99, 1, 2, 3, 4]

Values: Get the Values of an Object as an Array

The values filter is similar to the keys filter, but instead of returning the keys, it returns the values of an object as a new array.

// Example
{ name: 'John', age: 30 } -> values() -> ['John', 30]

These array filters provide a comprehensive set of tools for working with arrays in Xano. Whether you need to transform, filter, sort, or perform other operations on arrays, Xano has you covered. By mastering these filters, you can streamline your development process and build powerful applications more efficiently.