Angular CRUD operation using JSON file | Read Json File | Angular project

foreign Partners so in this video we are going to talk about local storage example right so when we appear for the machine test or any interview right after the normal theoretical questions logical questions everyone will ask you to perform some coding around right or the machine test they will provide something right so most of the let's say out of 100 70 percent machine test are normally the crowd operation so I mean forms can be anything like employee form product form e-commerce normal application anything it can be scenario can be anything but just a current application everyone will expect right so when someone asks you crowd application so there are normally three ways by which they will ask you to complete the current operation first is using local storage if that company didn't provide you any API so you have to do that crowd operation by storing the data into the local storage right considering local storage as our database then second is with API integration so if you got the API then it is a little bit easy what we do we just design the form and on button click we just call that API right third is with Json file so this is the uh way we are going to say in this episode like how we can do crud operation by using Json file so when I mean Json files we are going to store the Json file into our asset folder over here and that we will read by using HTTP client only into our component and we will try to cover the basic crowd operation right so let's get started see so this is an empty project I have created so in that just uh bootstrap I have added and that entry I have added in the angular.json apart from that it is a basic empty project so in app holder let's create uh in employee application we are going to cover and in that we will try to cover two form first is the department form and second is the employee registration form in employee registration form we are going to need the department Department drop down right so inside app folder let me just create a folder as pages and inside the pages I will create my component so I have created a folder right click on that folder I'd open in New terminal so that our terminal will open onto that particular folder so NG generate component let's say departments foreign folder I have created sorry components or let's not create only one component that is employed we will store the department into our Json file so that we don't want to waste time so NG generate component employee registration only one folder we are going to create and in that we will try to cover the basic all crowd operation right so component is created now this particular component I will render by using its selector into my app component right so in that component I have imported that let's run the application now just to see if a component is getting loaded properly or not so I open the node new terminal from here so that our terminal has opened into our parent for a particular project folder so NG server enter now by the time it runs we can just create a Json files in asset folder so in asset folder I will just create one Json file first file we are going to create is the further departments so depart means dot Json right so in the department.json we are going to store the array of our department so let's create an object first and inside that we can say let's say data is the first property and inside that we are going to have array and array will be of object occurring so let's say Department ID we have to wrap it in a double quotes colon 1 comma Department name sales this is one object comma let's copy paste ID will be 2 marketing admin r d right so we have four Department with some different IDs so this is just a simple array we have stored into our department Json file so first thing in our employee component we will try to read this department data in our employee component right so yeah it is running successfully so let's localhost 420 by default it will run on that Port so you can see employee registration works is hitting display now uh I have just Googled a simple form for employee registration so you can see this is the form I am going to use so let's click on show code this is just a sample code I'm just copying and I will paste that over here so that we don't have to waste the time in designing the form so let's see forms look yes so you can see form is looking proper now here what we need to do on the page load of this employee component first thing we have to do is read the department file because we are going to show the department drop down let me just copy this so first name last name after that instead of birthday we can put our select apartment okay so select department will be there now so on the page load means on whence the component loaded we have to call the particular Department Json file and get the data in store into a variable right just like the gate API so for that we first need to implement on init right the life cycle event so on init then implements on in it NG all in it we have to implement so we are going to read the Json file using HTTP client only so that we can it will be like we are making the API call but we won't be actually triggering the API call we will just simply read the data from the asset folder so for that Constructor round bracket we have to create the object of HTTP client so if we have to use the HTTP client so in app module first thing we have to do is in the import statement we have to add the HTTP client module right so let's just add the import input which will be from common slash HTTP and here will be HTTP client module and this will be added into the import section right so first thing if we have to make the if we have to make use of the HTTP client so first thing we have to do is in app model we have to add this so this is done let's close this after that in employer employee component we have to create the object of employee sorry HTTP client service HTTP client right so this is nothing but dependency injection so we have injected HTTP client service into our employee registration component next thing let's create a method load departments round by K curly brackets so this is the function in which we will be making our call to that particular Json file so this dot HTTP dot it will be gate method only round bracket now URL so in normal API call we pass the URL but in this situation we have to read this particular Department file so the URL will be like or let's try a sales slash our particular Department file name dot Json we have to keep it over here and then dot subscribe for normal API call code will be used over here insult colon any I'm also not sure if this path will work otherwise we have to add double dot and slash so let's check it then debugger and we have to call this function on engine so that once the component load we hit this function will be get called save all let's go over here inspect the network call let's see if we have the API call yes so successfully we have done the API calls so you can see in the response we have got the data object and inside that we have got whole array right so let's create an array variable departments colon any r a is equal to array right whatever the response we have got from this particular asset file that we will store into this department so res dot data as you can see in result we have got the object but inside that object in data property we have got our actual data array right so in departments we have got the department so that we will buying over here the option value will be empty this will be choose Department then option and here we have to use our NG form s let Department of departments right so value we need to make it property binding because in departments array we are going to get the Department ID so value we will buy in Department ID let's see what property we get res data right so Department ID this is the value key which will bind it over here and to display we will be displaying Department name Dot Dept name this is the field name right so let's say you can check if we can see the departments in the particular form so you can see whatever the data we had in our Json file that data we have successfully read and that data we have displayed into our drop down right so first thing is done Let's uh the first name last name Department gender email and the phone number and this we can see we can remove this just with the normal field we will try to cover the scenario something is missing the label is missing but it is coming down let's try now yeah so it is looking proper log okay all the things were down only but little bit so our form is ready now what we need to do this is like form but we need to show the list also right so again in asset folder we need to create employee list so in asset folder right click new file employee dot get dot Json or let's not add extra Dot it will be like get employee get employee.json so now in this Json I am going to store employee list in the again data property only right so Fields will be whatever the form field we have first name last name Department gender email and phone number so like that we will create the properties first name Olan searching last name in dulcer Department let's say sales and what else we have gender email and phone number so gender email and phone number just the demo phone number I had so this is a first object let me just create some more objects so I have created some records you can see all the data is correct just I have added Department ID because once we click on edit this data we are going to display right so for that department ID I have added right so in the employee component now on the page load we need to show the list also right so let's just create one module let me just copy this thing only whatever the classes it has now we have to show the list version Let Me format here in this particular view I will be creating list I will be showing the data into the table so table let's add classes table ordered right so inside that t head will be there ER pH serial number the basic thing we are going to show name so from the Json file we are going to get the first name and the last name but here we will join them as a full name Department then it will be email ID right so these are things we are going to see then we need T body then TR and then respective number of TDS we have four pH over here so obviously we are going to note need for TD right but currently we have two divs one for the list and one for the form so let's create a variable that will be responsible to trigger between the views is list View colon Boolean is equal to by default true so if this variable is true we will show the list div otherwise the form do star in G if if this is true this will be visible otherwise this and this will be visible if it is false now inside that we will need one button called 12 button so let's add class vtn vtn SM vtn success it will be like show okay here also the interpolation name will be dynamic so if this variable is true then we will be displaying what we can say if this variable is true so we have to show new button otherwise list button right so let's say because in the table in the form we have table also and the form also so at the time only one thing will be displayed right so for this we have created this So currently we have got the table but if I click on new okay we haven't written The Click event right so let's write the click event over here click event and I'm not going to create the function because on this click event we are simply changing the value right so this equal to lot of this so it is just like a toggle thing let's save and check it now so by default this variable was true so we have got new button and the table is visible if I click on new so you can see form is visible and the button text is also changed list just assign it to the right side text and why it is taking so much space okay because we don't have the data so once we have the data it will work right so first thing is like on the page load we need to load we need to call the particular Json file and get the data and store it into a variable and show that into the table right so for that again we have to create one more API call that is load employees round bracket curly bracket this dot HTTP again gate method will be there round bracket all will be gate method only because we are just trying to read the data now URL will be sets slash our particular file name that is get employee.json it will go over here the normal level subscribe call dot subscribe from record result cool and any right so we need the we need one more array employee list any right so whatever the response we get that we are going to store it over here in this variable res dot data on the page load we need to call this function just like the Departments so here we are calling it right so let's just add a debugger over here also and let's check if it is working properly let's open console let's reload the page yes so you can see in the result on data we have got the data you can see same data we what we have stored in the Json file we have successfully read and that we are going to store it into the employees so in the employee list we have got the array now this we have to show into the table so again let's go back to the HTML for Loop will be on the TR let EMP off right now first step first it is like serial number so we are going to need the serial number so for that late s r is equal to index we have to store and here we just need to interpret so indexing will normally start with 0 so we have to just make it plus one then EMP dot now things what we need to show so name so as you can see we have got first name and the last name right so we can make use of the interpolation to just make it join right this is first interpolation then second interpolation will be EMP Dot the last name only right so like this let me just copy then we have department so that is Department field it will go over here and the email so this will go over here right so let's save and check yes so you can see we have got the data from the Json file and we have rendered that successfully into the table so first task is done like inside current operation read operation is done next thing is post API so for post API just like uh you might have seen Json placeholder API when we hit post API it doesn't what we can say actually insert the data it will just API call is Success so just like that structure we have to achieve so again we need to create one more file so that will be post employee employee dot Json now inside that we will just return simply API some static data like data or result true oh and message we will be sending employee created successfully right so in the post employee we have we are returning this particular object now on the save method right so on this form we have the save button right submit button instead of submit it will be button on this save button on the submit button we need to call that particular Json file so before that first we need to create the object right that we will bind it out to our form so it will be employee object all in any curly bracket so let's make use of this object only but we just don't need the employee let's initialize everything empty object we have created now this employee object we have to bind to our form but when we bind the particular object to the form so we need forms model because we are going to bind that using NG model so to use the NJ model just like HTTP client model we need the forms model also so in the import just write forms model that's it then you can make use of the HTTP client model sorry in gmodel so this object we will bind to our form so starting from above so you can see this is the first name sorry here square bracket round bracket NG model equal to employee object dot so until object Dot first name we have to buy right so this will go over here just like that let me just copy paste then we will just change the field name so that we will save our sometime class plus here also it will row okay so we have two tables that gender generator we have done that's it now we just need to change the properties so first name we had we have done then last name now this our particular form is in the form tab right so either we can remove that or let's just remove that up because we have to add the name property very well then that will just increase our video length so last name is done then department so Department we will be binding with the Department ID so that will be Department ID then gender so for gender we have two radio button right so both the places we need to bind that just name we have to keep it the same right then value will be let's say email and this will be mail right then we have what is this other let me just remove that we don't need third option and last one is email right so email will go over here and last one is phone number so that is whole number this property we will bind it over here right so our whole form is particularly binded so let's check if we have any error on click of new yes so we don't have any error right now we need to implement the click event so on this button we need the click event so click on create EMP this is the function we are going to create so this function will go into our employee component.ts so after load employee this function then right so from this function we need to call over that particular Json file so again this Dot HTTP dot now we have to insert the data since we are not making the actual apical but we have to do the whole structure same so APA call Will normally we do with the post operation now for post we will have two parameter first is the URL and second is the object so this dot employee object will be the second parameter an asset slash let's see the post employee URL and go over here right then subscribe call now here we will be simply just showing the alert like record got successfully because there is no mechanism to check like if some validation is there or not because we are simply calling the Json pack so if someone asks you to do this now they will take they cannot expect the whole thing here we can just show whatever the response we get so if you can see in message we are getting we are going to get the data right so res Dot message we can simply show now let's test if it is working fine let's add a debugger first let's remove this from here and let's put it over here now on click of new we got the form right so let's say we are only Department admin email or mail you can see only one option is getting selected because we have added name property same to both the radio button right so we are at the gmail.com whole number right so now on click of submit we should get that debugger yes so once I click on submit you can see I have got the debugger and in employee object you can see whatever the data we have filled over there that data got populated into particular objects so our object is ready right let's make I add a debugger over here if I continue okay so something is not right now what it is saying post employed or Json it doesn't call that why let me see ing is correct only it might be possible like post won't allow it to access let's try to make it great yeah so with gate only it is allowing let me try to search and we access Json file with HTTP client post method let's see if it is required I think no we cannot do that post reference number let's see they have done it the URL okay with the normal API no we want it with the local Json file okay so let it be but just for the understanding we have seen so same method like uh to read the particular Json highlights thing it is not allowed so this should be your code right instead of gate this will be there right but since we are not able to come access this particular file so we're just making it with Git right let me just copy and paste it so that you can have a reference this will be post and let's just comment this right so we need to send the object and the URL now it will begin let me remove this let's try to hit directly submit continue continue yes so you can see employee got created successfully message we have got so in normal application when we save or create any record we normally call the gate Epi right so that also we have to take care so this function again we have to call over here once we successfully save the data so that new records will be successfully loaded see we are doing we are dealing with the Json file so data is not going to change data will be static but we need to create whole operation right so gate operation is done create operation is done now we need to do delete operation under update operation right so in the HTML we need to add the edit button so let's add th over here that will be action in TD again two buttons we are going to need first is for edit and second is for delete this will be edit button and one more button will be needed for the delete right so on click of edit what we need to do in the tape in this particular object we have got whole data so there is no point to make the API call or read the particular Json file so we can simply get the data from this right this is the object right so let's create click event on a date and we need to pass the particular object so that is EMP let's create this function and from HTML we are sending an object that we need to receive receives the same object over here item hold on any and this whatever the object we have got that we need to assign it to this object so this dot employee object is equal to item and we need to make that variable true which is list variable false so that our form will be visible this dot is list is equal to false so so that over form UI will be visible so let's add the debugger over here and let's check if it is working properly so our edit one operation is completed right so if I click on edit I'm clicking on Raul through with record so if I click on edit so you can see in the item we have got whole object right that same object we are assigning to our employee object and then we are displaying the form so you can see that whole form got pre-populated just like the edit call we normally do with the API call then we just need to make the update call now if I click on edit instead of the submit or let's change that button to the update so that we can decide because once we click on the edit in the list object okay employee ID we haven't created right so let it be that because we we can add a check like if employed is zero then we can show the submit button if employee object is employee object dot ID is not zero then we can show the update button right so if you create if you in the gate employee if you add the employee ID then you can take care of that but I haven't done so I will skip that the next button is submit only right so submit call will be same like this you just have to create one more put employee call and you need to call that impl just like the post thing just like this only you need to call that on the other file now we need to take care of the delete file delete functionality so click on delete and we need to send the particular object right so let's create this function again we are going to get the object right so again same thing right you need to create one more delete.json file and you need to make the call as it is right so this is how we can complete the basic crud operation with Json file so the thing is we just need to create that much Json file into however here like get employee post employee put employee delete employee and we just need to make the APA call use means we just need to call the call that particular file using HTTP client like this I have done right so hope this video was helpful to you right in next uh video I will be trying to cover the same thing with local storage so that you will have idea like how it was with Json file and how it is with local storage so that's it with this current video please do subscribe if you have not and please do like my videos

Channel: LEARNING PARTNER

Views: 6,221

Keywords: Employee app in angular, employee management app angular, angular project, angular tutorial for beginners, angular, angular 16, Angular CRUD tutorial, employee app in angular, employee registration app angular, employee crud angular, read json file in angular, angular read json file, angular crud with json file, crud with file file angular, angular crud, registration app angular, Angular CRUD Tutorial Step by Step, Angular CRUD application with JSON server, Angular 15 CRUD

Id: DKgm40em9Mg

Length: 37min 2sec (2222 seconds)

Published: Thu Sep 21 2023