Aberdeen - v1.12.1
    Preparing search index...

    Function onEach

    Reactively iterates over the items of an observable array, object, Map, or Set, optionally rendering content for each item.

    Automatically updates when items are added, removed, or modified.

    The observable array, object, Map, or Set to iterate over. Values that are undefined are skipped.

    A function called for each item. It receives the item's (observable) value and its index/key. For Sets, only the value is provided. Any DOM elements created within this function will be associated with the item, placed at the right spot in the DOM, and cleaned up when redrawing/removing the item.

    An optional function to generate a sort key for each item. This controls the order in which items are rendered in the DOM. If omitted, arrays use index order, Sets use the item value itself, and objects/Maps use their natural key order. The returned key can be a number, string, or an array of numbers/strings for composite sorting. Use invertString on string keys for descending order. Returning null or undefined from makeKey will prevent the item from being rendered.

    const $items = A.proxy(['apple', 'banana', 'cherry']);

    // Basic iteration
    A.onEach($items, (item, index) => A(`li#${item} (#${index})`));

    // Add a new item - the list updates automatically
    setTimeout(() => $items.push('durian'), 2000);
    // Same for updates and deletes
    setTimeout(() => $items[1] = 'berry', 4000);
    setTimeout(() => delete $items[2], 6000);

    const $users = A.proxy([
        { id: 3, group: 1, name: 'Charlie' },
        { id: 1, group: 1, name: 'Alice' },
        { id: 2, group: 2, name: 'Bob' },
    ]);

    // Sort by name alphabetically
    A.onEach($users, ($user) => {
        A(`p#${$user.name} (id=${$user.id})`);
    }, ($user) => [$user.group, $user.name]); // Sort by group, and within each group sort by name

    const $config = A.proxy({ theme: 'dark', fontSize: 14, showTips: true });

    // Display configuration options
    A('dl', () => {
        A.onEach($config, (value, key) => {
            if (key === 'showTips') return; // Don't render this one
            A('dt#'+key);
            A('dd#'+value);
        });
    });

    // Change a value - the display updates automatically
    setTimeout(() => $config.fontSize = 16, 2000);

    const $tags = A.proxy(new Set(['ui', 'fast', 'tiny']));

    A('ul', () => {
        A.onEach($tags, (tag) => { // Defaults to alphabetically ordering by tag
            A(`li#${tag}`);
        });
    });

    setTimeout(() => $tags.add('reactive'), 2000);

    invertString To easily create keys for reverse sorting.

    • Type Parameters

      • K
      • T

      Parameters

      • target: Map<K, undefined | T>
      • render: (value: T, key: K) => void
      • OptionalmakeKey: (value: T, key: K) => SortKeyType

      Returns void

    • Type Parameters

      • T

      Parameters

      • target: Set<T>
      • render: (value: T) => void
      • OptionalmakeKey: (value: T) => SortKeyType

      Returns void

    • Type Parameters

      • T

      Parameters

      • target: readonly (undefined | T)[]
      • render: (value: T, index: number) => void
      • OptionalmakeKey: (value: T, index: number) => SortKeyType

      Returns void

    • Type Parameters

      • K extends string | number | symbol
      • T

      Parameters

      • target: Record<K, undefined | T>
      • render: (value: T, index: KeyToString<K>) => void
      • OptionalmakeKey: (value: T, index: KeyToString<K>) => SortKeyType

      Returns void

    Settings

    Member Visibility