Documentation
Fuse Components
Pipes

## findByKey

fuseFindByKey is a helper pipe that finds entries from an object using given key-source set.

## Module

import { FuseFindByKeyPipeModule } from '@fuse/pipe/find-by-key';

## Usage

value | fuseFindByKey:key:source

Consider this array of objects representing the tags and tasks data stored on the backend:

const tags = [ { id : 'tag-00', title: 'Api', color: 'red' }, { id : 'tag-01', title: 'Frontend', color: 'blue' }, { id : 'tag-02', title: 'Bug', color: 'green' } ]; const tasks = [ { id : 'task-00', title: 'Company internal application v2.0.0', tags : [ 'tag-00', 'tag-01' ] }, { id : 'task-01', title: 'Create the landing/marketing page and host it on the beta channel', tags : [ 'tag-02' ] }, { id : 'task-01', title: 'Move dependency system to Yarn for easier package management', tags : [ 'tag-00', 'tag-01', 'tag-02' ] } ]

Normally, you would join these two data together in the backend before sending it to the frontend so you can access tags of a task right from the task itself:

const tasksWithTags = [ { id : 'task-00', title: 'Company internal application v2.0.0', tags : [ { id : 'tag-00', title: 'Api', color: 'red' }, { id : 'tag-01', title: 'Frontend', color: 'blue' } ] }, { id : 'task-01', title: 'Create the landing/marketing page and host it on the beta channel', tags : [ { id : 'tag-02', title: 'Bug', color: 'green' } ] }, { id : 'task-01', title: 'Move dependency system to Yarn for easier package management', tags : [ { id : 'tag-00', title: 'Api', color: 'red' }, { id : 'tag-01', title: 'Frontend', color: 'blue' }, { id : 'tag-02', title: 'Bug', color: 'green' } ] } ]

But, let's say you cannot join them. You have no access to the backend app or you cannot make any changes to it and you have to work with what you have. In this case, you can use the `fuseFindByKey` pipe to get the tags of a task without joining the two data using javascript:

<!-- Iterate through the tasks --> <ng-container *ngFor="let task of tasks"> <!-- Iterate through the tags of the task but rather than returning the tag id, use that id to find the actual tag object from 'tags' so we can access the properties like title and color of the tag --> <ng-container *ngFor="let tag of (task.tags | fuseFindByKey:'id':tags);"> <div>{{'{'}}{{'{'}}tag.title{{'}'}}{{'}'}}</div> </ng-container> </ng-container>

The above code will iterate through the tasks, and for each task, it will also iterate the task's tags.

`task.tags` array normally holds the ids of the assigned tags. But using `fuseFindByKey` pipe, we can use those ids to extract the actual tag object from the tags array.