Collection Helpers Collection Helpers provide methods for manipulating arrays of objects with unique identifiers. These helpers make it easy to update, replace, or remove specific items in a collection while maintaining reactivity.
An object’s ID is determined by checking for properties in this order: _id
, id
, hash
, key
. The first defined value is used as the identifier.
setProperty
Sets a property on an object in the collection that matches the given id.
Syntax
signal. setProperty (id, property, value)
Parameters
Name Type Description id any The id of the object to modify property string The name of the property to set value any The value to set for the property
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ id: 'user1' , name: 'Alice' },
{ id: 'user2' , name: 'Bob' }
users. setProperty ( 'user1' , 'status' , 'active' );
Example
replaceItem
Replaces an entire object in the collection that matches the given id.
Syntax
signal. replaceItem (id, newItem)
Parameters
Name Type Description id any The id of the object to replace newItem Object The new object to replace the old one
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ id: 'user1' , name: 'Alice' },
{ id: 'user2' , name: 'Bob' }
users. replaceItem ( 'user1' , { id: 'user1' , name: 'Alex' });
Example
removeItem
Removes an object from the collection that matches the given id.
Syntax
Parameters
Name Type Description id any The id of the object to remove
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ id: 'user1' , name: 'Alice' },
{ id: 'user2' , name: 'Bob' }
users. removeItem ( 'user1' );
Example
getIDs
Gets all possible ID values from an object by checking for _id
, id
, hash
, key
properties.
Syntax
Parameters
Name Type Description item Object or string The object to get IDs from, or a string ID directly
Returns
Type Description Array Array of ID values found in the object
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ _id: '1' , id: 'user1' , name: 'Alice' }
const allIds = users. getIDs (users.value[ 0 ]); // ['1', 'user1']
const stringId = users. getIDs ( 'user1' ); // ['user1']
getID
Gets the first available ID from an object by checking for properties in this order: _id
, id
, hash
, key
.
Syntax
Parameters
Name Type Description item Object or string The object to get ID from, or a string ID directly
Returns
Type Description string The first available ID found, or the string passed if a string was provided
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ _id: '1' , id: 'user1' , name: 'Alice' }
const id = users. getID (users.value[ 0 ]); // '1'
const stringId = users. getID ( 'user1' ); // 'user1'
hasID
Checks if an object or string has a specific ID.
Syntax
Parameters
Name Type Description item Object or string The object or string to check id string ID to look for
Returns
Type Description boolean true
if the object or string’s ID matches the provided id
, false
otherwise
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ _id: '1' , id: 'user1' , name: 'Alice' }
// Check if an object has a specific ID
users. hasID (users.value[ 0 ], '1' ); // true
users. hasID (users.value[ 0 ], 'user1' ); // true
users. hasID (users.value[ 0 ], 'wrongId' ); // false
// Check if a string has a specific ID
users. hasID ( 'user1' , 'user1' ); // true
users. hasID ( 'user1' , 'user2' ); // false
getItem
Gets the index of an object with the specified ID within the Signal’s array value.
Syntax
Parameters
Name Type Description id string ID to look for
Returns
Type Description number Index of the matching object in the array, or -1 if not found
Usage
import { Signal } from '@semantic-ui/reactivity' ;
const users = new Signal ([
{ id: 'user1' , name: 'Alice' },
{ id: 'user2' , name: 'Bob' }
const indexOfBob = users. getItem ( 'user2' ); // 1
const indexOfUnknown = users. getItem ( 'user3' ); // -1