data-transformer-lens.md

title	description	template	last_updated	redirect_from	related
Data Transformer: Lens	This document provides details about the Data Transformer Lens 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.lens /docs/scos/dev/front-end-development/202204.0/marketplace/ui-components-library/data-transformers/lens.html /docs/scos/dev/front-end-development/202404.0/marketplace/ui-components-library/data-transformers/data-transformer-lens.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 Object-map docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-object-map.html title link Data Transformer Pluck docs/dg/dev/frontend-development/page.version/marketplace/ui-components-library/data-transformers/data-transformer-pluck.html

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

Overview

Data Transformer Lens is an Angular Service that updates nested objects by path using another Data Transformer set up with a configuration object.

In the following example datasource will return an object with the transformed date.

Service configuration:

• path—the name of the object property, from which the value needs to be transformed. The path may contain nested properties separated by dots, just like in a Javascript language.
• transformer—a Data Transformer that is set up with a configuration object.

<spy-select
    [datasource]="{
        type: 'inline',
        data: {
            type: 'date',
            date: '2020-09-24T15:20:08+02:00',
        },
        transform: {
            type: 'lens',
            path: 'date',
            transformer: {
                type: 'date-parse',
            },
        },
    }"
>
</spy-select>

Service registration

Register the service:

declare module '@spryker/data-transformer' {
    interface DataTransformerRegistry {
        lens: LensDataTransformerService;
    }
}

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

Interfaces

Below you can find interfaces for the Data Transformer Lens:

export interface LensDataTransformerConfig extends DataTransformerConfig {
    path: string;
    transformer: DataTransformerConfig;
}