data-transformer-pluck.md

title	description	template	last_updated	redirect_from	related
Data Transformer: Pluck	This document provides details about the Data Transformer Pluck service in the Components Library.	concept-topic-template	Nov 21, 2023	/docs/marketplace/dev/front-end/202212.0/ui-components-library/data-transformers/data-transformer-pluck.html /docs/scos/dev/front-end-development/202204.0/marketplace/ui-components-library/data-transformers/pluck.html /docs/scos/dev/front-end-development/202404.0/marketplace/ui-components-library/data-transformers/data-transformer-pluck.html	title link Data Transformers docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformers.html title link Data Transformer Array-map docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-array-map.html title link Data Transformer Chain docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-chain.html title link Data Transformer Date-parse docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-date-parse.html title link Data Transformer Date-serialize docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-date-serialize.html title link Data Transformer Lens docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-lens.html title link Data Transformer Object-map docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-object-map.html

This document explains the Data Transformer Pluck service in the Components Library.

Overview

Data Transformer Pluck is an Angular Service that selects and returns a nested object by path via configuration.

The following datasource example returns the value of the three key ('123') of the data input after receiving the response.

Service configuration:

• path—the name of the property from which the value needs to be retrieved. The path may contain nested properties separated by dots, just like in Javascript.

<spy-select
    [datasource]="{
        type: 'inline',
        data: {
            one: {
                two: {
                    three: '123',  
                },
            },
        },
        transform: {
            type: 'pluck',
            path: 'one.two.three',
        },
    }"
>
</spy-select>

Service registration

Register the service:

declare module '@spryker/data-transformer' {
    interface DataTransformerRegistry {
        pluck: PluckDataTransformerService;
    }
}

@NgModule({
    imports: [
        DataTransformerModule.withTransformers({
            pluck: PluckDataTransformerService,
        }),
    ],
})
export class RootModule {}

Interfaces

Below you can find interfaces for the Data Transformer Pluck:

export interface PluckDataTransformerConfig extends DataTransformerConfig {
    path: string;
}