Document Tree
    Document Properties
    Kbid
    30D819
    Last Modified
    21-Dec-2023
    Added to KB
    18-Apr-2023
    Public Access
    Everyone
    Status
    Online
    Doc Type
    Guidelines
    Product
    Intershop Progressive Web App
    Guide - Intershop Progressive Web App - Data Handling with Mappers

    The data models for server-side and client-side have to be separated, because the data sent by the server may change over iterations or may not be in the right format, while the client side shop data handling should be stable for a long time.
    Therefore, each service communicating with the Intershop REST API should only respond with mapped PWA models.

    The format of raw data from the server is defined by an interface (.interface.ts) and mapped to a type used in the Angular application (.model.ts).
    Both files have to be close together so they share a parent directory in src/core/models.
    Next to them is a .mapper.ts to map the raw type to the other.

    category.interface.ts

    export interface CategoryData {
      id: string;
      name: string;
      raw: string;
    }

    category.model.ts

    export interface Category {
      id: string;
      name: string;
      transformed: number;
    }

    The mapper should be a class with static methods that will be used in the corresponding service.

    In special cases, the mapper class might need some dependencies to transform data correctly.
    In that case, you can declare it as an Injectable and use Angular's dependency injection mechanism to provide an instance in your service.

    Warning

    If the mapper needs no dependencies, always use static methods!

    category.mapper.ts

    export class CategoryMapper {
      static fromData(categoryData: CategoryData): Category {
        const category: Category = {
          id: categoryData.id,
          name: categoryData.id,
          transformed: CategoryHelper.transform(categoryData.raw),
        };
        return category;
      }
    
      static fromObject(category: Category): CategoryData {
        const categoryData: CategoryData = {
          id: category.id,
          name: category.id,
          raw: CategoryHelper.raw(categoryData.transformed),
        };
        return categoryData;
      }
    }

    A .helper.ts can be introduced to provide utility functions for the model.

    Disclaimer
    The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
    The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
    Home
    Knowledge Base
    Product Releases
    Log on to continue
    This Knowledge Base document is reserved for registered customers.
    Log on with your Intershop Entra ID to continue.
    Write an email to supportadmin@intershop.de if you experience login issues,
    or if you want to register as customer.