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.