(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. Handling JSON data and Synchronization with DB in Angular
Jan 21
Handling-JSON-data-and-Synchronization-with-DB-in-Angular

Handling JSON data and Synchronization with DB in Angular

  • January 21, 2020

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.
1
2
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.
1
2
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.

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (490)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (56)
  • Implementation Notes (148)
  • Learn More (156)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development
  • Are Agile and DevOps the same?
  • The Data Scientist’s Toolset

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com