Related Github Documents
Document Properties
Kbid
3056L3
Last Modified
21-Jul-2022
Added to KB
27-Aug-2022
Public Access
Everyone
Status
Online
Doc Type
Guidelines, Concepts & Cookbooks
Product
Intershop Progressive Web App

Guide - Intershop Progressive Web App - Data Handling with Mappers

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.

⚠️ 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.

Customer Support
Knowledge Base
Product Resources
Tickets