The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`. If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
import {flattenConnection} from '@shopify/hydrogen-react';
export function ProductList({productConnection}) {
const products = flattenConnection(productConnection);
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
);
}
import {flattenConnection} from '@shopify/hydrogen-react';
import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';
export function ProductList({
productConnection,
}: {
productConnection: ProductConnection;
}) {
const products = flattenConnection(productConnection);
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
);
}
Gets or sets the length of the array. This is a number one higher than the highest index in the array.
Returns a string representation of an array.
Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.
Removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
Appends new elements to the end of an array, and returns the new length of the array.
Combines two or more arrays. This method returns a new array without modifying any existing arrays.
Adds all the elements of an array into a string, separated by the specified separator string.
Reverses the elements in an array in place. This method mutates the array and returns a reference to the same array.
Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
Returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array.
Sorts an array in place. This method mutates the array and returns a reference to the same array.
Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
Inserts new elements at the start of an array, and returns the new length of the array.
Returns the index of the first occurrence of a value in an array, or -1 if it is not present.
Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present.
Determines whether all the members of an array satisfy the specified test.
Determines whether the specified callback function returns true for any element of an array.
Performs the specified action for each element in an array.
Calls a defined callback function on each element of an array, and returns an array that contains the results.
Returns the elements of an array that meet the condition specified in a callback function.
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
Returns the value of the first element in the array where predicate is true, and undefined otherwise.
Returns the index of the first element in the array where predicate is true, and -1 otherwise.
Changes all array elements from `start` to `end` index to a static `value` and returns the modified array
Returns the this object after copying a section of the array identified by start and end to the same array starting at position target
Returns an iterable of key, value pairs for every entry in the array
Returns an iterable of keys in the array
Returns an iterable of values in the array
Determines whether an array includes a certain element, returning true or false as appropriate.
Calls a defined callback function on each element of an array. Then, flattens the result into a new array. This is identical to a map followed by flat with depth 1.
Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.
Iterator
Returns an object whose properties have the value 'true' when they will be absent when used in a 'with' statement.
Takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.