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
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.