Re-map javascript objects

Md Moin
4 min readMar 24, 2019

We all have worked with javascript object & javascript being loosely typed does not provide any data type concept as well. I have now come across one of the scenario for which we would require some functionality to map your objects to specific data type.

Lets try to fit into a scenario on what exactly happened, in one of my projects i had to start working on the application without knowing the json structure. One thing we can do is work with mock data it’ll not hamper the development, but how can we decide on the mock data structure when there’s ZERO input on the actual data structure that’ll come from the server. Now we have 2 options in this case.

  1. Wait for the backend structure to be prepared first
  2. if you can’t wait than start working with some dummy mock as per your understanding

Now first case seems fine, it’ll not have an impact but in my case i can’t wait so had to opt for 2nd option, the main issue in this case is if later the structure (like property name or casing differ) is not matching our mock structure wherever the application has already used requires an update & if you have the same structure used at multiple places or maybe multiple objects as well with different types used, now how do we deal with this issue.

image credits : cartoonstock.com

Like, nowadays we can make a request & possibly do a map to construct the object, but can we do this for each one & everywhere it can be feasible but too much of re-work. I came to a conclusion of maybe having a remapper, this just helps you map the object as per your choice irrespective of its own structure & its more like you are defining a schema of sorts & can be defined maybe in one place & consumed all over, which would possible help in getting the object constructed as per your mock structure. So what is this remapper made up of, it composes of following parts.

  1. reMap : this function technically takes in an object map, actual object properties & the data that needs to be remapped.
  2. reMapAll : this function is more off a helper considering the fact that we may have an array of objects to be remapped or maybe just one single object.
  3. createObject : As the name says it just helps in creating an object with custom properties being mapped with actual data properties.

I’m using lodash utility functions to accomplish this.

reMap(custom_schema,conversion_schema,data)

  1. custom_schema : this will be an object comprising of mappings of actual properties with custom properties

the schema is a key value pair where key is the property names of actual data & values are the properties to be remapped to

2. conversion_schema : this is an array consisting of all available properties of the object.

assuming i have a product object which is supposed to have those 5 properties, order does not matter those are just the object properties that we need to create & map data to

3. data : this is the data that needs remapping it can be an array or a single object.

as you can see the data structure has properties which are completely different from conversion_schema properties this is what we need to remap as per the mapping schema that we have supplied in pointer no 1

What is this function doing, this is the core function which will accomplish remapping of data, but first we need to identify how many properties are available in actual data & corresponding properties for the same. We may also have some extra data which we may not require or some properties which aren’t available in data so we are going to identify the missing keys as well & based on data types we’ll remap individual object or array of objects.

create object requires all the info to do the remapping, wherein we create a new object map all data based on properties as per schema & add empty properties for the missing ones, the omit function was used to eliminate any additional property which wasn’t define as per our schema mappings

remapall function just creates new object for every object in the array & returns the remapped array.

You can checkout the working demo here, the output is available in the console or here https://object-remapper.stackblitz.io

Feel free to share your views & opinions on the same, i would try to improvise the same with class definitions, like using class as a custom data type to avoid conversion_schema array definition.

--

--

Md Moin

I’m a dev who codes for fun & likes to share my learnings.