data-transformer-chain.md

title	description	template	last_updated	redirect_from	related
Data Transformer: Chain	This document provides details about the Data Transformer Chain 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-chain.html /docs/scos/dev/front-end-development/202204.0/marketplace/ui-components-library/data-transformers/chain.html /docs/scos/dev/front-end-development/202404.0/marketplace/ui-components-library/data-transformers/data-transformer-chain.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 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 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 Chain service in the Components Library.

Overview

Data Transformer Chain is an Angular Service that executes other Data Transformers in sequence via configuration.

In the following example, the datasource returns an array with the transformed date in every child object using chained transformers.

Service configuration:

• transformers—an array with Data Transformer configuration objects.

<spy-select
    [datasource]="{
        type: 'inline',
        data: [
            {
                type: 'date',
                date: '2020-09-24T15:20:08+02:00',
            },
            {
                type: 'date',
                date: '2020-09-22T15:20:08+02:00',
            },
        ],
        transform: {
            type: 'chain',
            transformers: [
                {
                    type: 'array-map',
                    mapItems: {
                        type: 'lens',
                        path: 'date',
                        transformer: {
                            type: 'date-parse',
                        },
                    },
                },                                            
                {
                    type: 'array-map',
                    mapItems: {
                        type: 'object-map',
                        mapProps: {
                            date: {
                                type: 'date-serialize',
                            },
                        },
                    },
                },
            ],      
        },                  
    }"
>
</spy-select>

Service registration

Register the service:

declare module '@spryker/data-transformer' {
    interface DataTransformerRegistry {
        chain: ChainDataTransformerConfig;
    }
}

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

Interfaces

Below you can find interfaces for the Data Transformer Chain:

export interface ChainDataTransformerConfig extends DataTransformerConfig {
    transformers: DataTransformerConfig[];
}