Using JavaScript for Data Processing

Using JavaScript for Data Processing | Magora-Systems

This post outlines a way of working with data in JavaScript. I received a task of developing a Calendar app, cells of which would actually become editable forms. Moreover, users would get to choose which specific form to use for each cell. Because of that, a cell pattern had to be generated on the client-side according to this choice. The intricacy here was that fields of each form ought to be editable as well. So, clearly, all changes needed to be stored somewhere.

I abandoned the concept of creating form patterns, because upon modification of one field another had to change, too. Field interaction logics concerned three database tables:

  • Two of them at least half-filled with data;

  • One for storing changes.

That’s why I decided to create my own storage (as a Store in Ext JS). The main idea behind it is that each JSON format node is presented as a separate unit. The principle is: I get all three tables and create three index trees, where each parent is also a context of a subsidiary node. Perhaps, it sounds a tad complicated, take a look at this example:

Customers

Orders

Schedule

There is a catalogue of customers, a list of orders and a shipping schedule. This schedule can be edited in the Calendar and Couriers can see orders assigned to them there. A courier can also be added to/removed from the schedule on a weekly basis.

Implementation

Store object is responsible for storing data and transferring it to/from the server. Implementation proceeds as follows:

InMemory function allows adding an object or an array received from the server to an index tree:

Using get, set or any other node function, we gain access to each level. For instance, you can implement the first method for the facadeArray. Then getting a specific courier’s schedule for a certain week will look like this:

If you haven’t yet worked with such handy functions as where, first, last, union, map, etc. - check out underscorejs.org.
Now you can modify scheduleByCourierIdAndWeek array: add a new day of the week or change existing ones.

The “facade” of getNode function can be reworked according to your needs.

Result

So, what is the end result here? We’ve divided a big object, received from the server, into connected nodes. We've sent nodes to the segments of code responsible for their processing. We've converted data the way user desired. Now we need to put it all together into a single object and send it back to the server. For that we utilize dumpAcc function:

JSON.stringify(dumpAcc(store.getScheduleList())) allows us to get clientResponse.
And, lastly, here are functions clone and isPrimitive that I've also used.

Team Lead/ Senior Software Engineer
Meet Artem, the dynamic force behind Magora's Development team and the success of our clients' projects.
open
related
4 Types of Data Analytics to Boost your Business GDPR at Work: Yahoo Fined £250k for Breaking Rules on Working with PD How to Validate Your Startup Idea Under the Hood of the App: Writing Backends in Ruby
recent
Generational nuances: crafting the user experience in 2024 VisionOS App Development: The Era of Spatial Computing EdTech 2024: Software trends for Teachers, Students and Headmasters The Heartbeat of AI: Ensuring AI Ethics in Education and Healthcare
recommended
Everything You Want to Know About Mobile App Development App Development Calculator Infographics: Magora development process Dictionary
categories
News Technologies Design Business Development HealthTech IoT AI/ML PropTech FinTech EdTech Mobile Apps Discovery Transport&Logistics AR/VR Big Data Sustainability
Logo Magora LTD
close
Thank you very much.
Magora team

Grab your e-book: Design to attract more buyers

Logo Magora LTD
close
Get in touch
Logo Magora LTD
close
Thank you very much.

Your registration to the webinar on the 27th of September at 2 p.m. BST was successfuly completed.
We will send you a reminder on the day before the event.
Magora team
Registration for a webinar

"Let Smart Bots Speed up your Business"
Date: 27.09.2018 Time: 2 p.m. BST
Do you agree to the personal data processing?