Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
setProperty
replaceItem
removeItem
getIDs
getID
hasID
getItem
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
signal.removeItem(id)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
signal.getIDs(item)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' }]);
// Using with an objectconst allIds = users.getIDs(users.value[0]); // ['1', 'user1']
// Using with a stringconst 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
signal.getID(item)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' }]);
// Using with an objectconst id = users.getID(users.value[0]); // '1'
// Using with a stringconst stringId = users.getID('user1'); // 'user1'hasID
Checks if an object or string has a specific ID.
Syntax
signal.hasID(item, id)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 IDusers.hasID(users.value[0], '1'); // trueusers.hasID(users.value[0], 'user1'); // trueusers.hasID(users.value[0], 'wrongId'); // false
// Check if a string has a specific IDusers.hasID('user1', 'user1'); // trueusers.hasID('user1', 'user2'); // falsegetItem
Gets the index of an object with the specified ID within the Signal’s array value.
Syntax
signal.getItem(id)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'); // 1const indexOfUnknown = users.getItem('user3'); // -1