Mapper

About

Mapper is very simple JavaScript library which is used to get/set data from forms or any other container. It's entirely written in TypeScript, without any external dependencies. Primary motivation for building tool like this was:

using .Net Core and Razor pages is very simple and fast way to build apps. In order to communicate with APIs, I needed simple way to map data to and from forms.
didn't want to use libraries which introduce observables as I only wanted to map data on specific events (API data received, user clicked save, ...)
wanted to have library which is written using vanilla typescript
didn't want to introduce other libraries which by themselves have other dependencies which by themselves have other ...
to modify it to automatically work with other components I usually use in projects like bootstrap datepicker, select2, ...
to have my first public project on GitHub

How to use

This page shows only examples, to check out full documentation, please visit project's GitHub page.

Examples

Example 1 - simple mapping

First name (map="firstName")

Last name (map="lastName")

Age (map="age")

User type (map="userType")

Has verified e-mail map="hasVerifiedEmail"

Yes/No

Is locked map="hasVerifiedEmail"

Yes/No

Example 2 - nested mapping

Example 3 - simple array mapping

Username map="username"

Roles map="roles[]"

Admin

Poweruser

Reader

Consents map="consents[]"

Example 4 - complex array mapping

Each input has map property like map="rolesAsJsonMap[userId=1].department". This will map input value (if checked) to element which matches provided userId condition.

	Department 1	Department 2	Department 3
User 1
User 2
User 3

Example 5 - complex array mapping

Each input element in first row has map property in map="rolesAsJsonMap[roleId=1].userId[]" form. This will add input value (if checked) to element which matches role=1 condition.

	User 1	User 2	User 3
Role 1
Role 2
Role 3

Example 6 - complex array mapping - finding array element by index

Example 7

Example 8 - Using data-attribute instead of value

Components like datepickers might not use value attribute to store value in required format. Easiest way is to store data in wanted format to data-value attribute. Name of this attribute can be changed.

To always set/get date in ISO format, all that needs to be done in following example is to set data-value="" attribute and set event onchange="this.setAttribute('data-value', this.valueAsDate.toISOString().substr(0, 10))".

Date of birth (map="datepicker")

Example 9 - Mapping raw JSON data

Example 10 - Fetching forms as FormData