Handling JSON data and Database Synchronization in Angular

Background Static data is normally stored in database for a separate column for each piece of data. This works for most cases but in case of complex and frequent changing data this might not be your best bet. In one of our projects, we observed issues because the data was very complex and changed were

Background

Static data is normally stored in database for a separate column for each piece of data. This works for most cases but in case of complex and frequent changing data this might not be your best bet. In one of our projects, we observed issues because the data was very complex and changed were very frequent. Creating and updating database schema for every scenario would have become a nightmare for us.

Solution

Here is a solution to work with complex and changing data:

Create data structure in your frond-end application. In our case it was Angular.
You can create better data structures using interfaces in typescript.
Ultimately, you need to store this in database, before sending the data to back-end convert it to JSON using JSON.stringify method e.g.

const data = {……};
const stringData = JSON.stringify(data);

Now this string version of your data can be stored in a single column in database.
In your front-end application you can now modify (add/delete) properties in your data and there is no need to change database schema for that.

Synchronization

Synchronization is an important part of the solution; you need to make sure that whatever is changed in JSON on front-end should be added to the data structure coming from database as soon as application is launched.

You have to do the following to sync data:

Create a method to compare properties in both front-end and data coming from database.
To compare data first you need to make sure that string version (JSON) data coming from database is converted to actual JavaScript so it is ready/compatible for comparison. You can use JSON.parse method e.g.

const stringData = “{……}”;
const data = JSON.parse(stringData);

Match each property and if there is some property missing in your data coming from database add that specific piece of data.
At the end of comparison, both data structures will be synced. All updated properties in front-end application are now updated in the data coming from database and now you can use the data as intended.

Using this approach, you will minimize the amount of work needed to change the database schema. It will make it easy for you to work with JSON data that change frequently.