After rigorous days of coding for my first project, I created a simple vanilla javascript project called "HR Manager" (short for Human Resource) where you can search employees by their unique ID and update employee's information (Edit & Update of CRUD functions). Thanks to JSON-server, I was able to mock a prototype database for this project.

A Screenshot of my Project Interface

Note: All of displaying data is obtained from Random Data Generator. Sensitive information is hidden as a security feature (becomes visible on mouse hover).

Application Structure:
Fetch API -> Database -> .then(dataDisplayerFunction) -> Update -> Fetch method: "PATCH" -> Database

The main purpose of the application is to get the employee's data from a server and then updates data if necessary, then send the updated data back to the server. Because of its simplicity and a sole purpose, the application was built in a plain structure.

After planning the structure of my project, I spent a good time observing the randomly generated data I obtained from Random Data Generator then I decided to "refine" the data structure in order to make it suitable for my project.

Original Data Structure
Too many keys!

After researching about restructuring data (data is an object), I finally came up with a perfect solution. The destructuring assignment syntax is "The" method for working with object, especially for modifying keys and values.

Destructuring Assignment in my code
I was able to rename the keys and assign values in different formats by using destructuring assignment syntax with String Interpolation

After Destructuring Assignment
Refined Object

References

• Cover Image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq1biuwpnih57hyo0p4s.jpeg

• JSON-server

• Random Data Generator

• Project code: https://github.com/jmjkim/fisphase1-project