JSON Server REST API in Angular 14 | load Material UI data table using JSON Server rest API data

hello friends welcome to nigeria techies this is our angular 14 tutorial so part of this video i'm going to explain json servers jp in angular so actually i'm splitting this video into two parts the first step is i'm going to initiate my json server htp and the second step is using this json server http data i am going to load the data table first let me go to my application here i am going to create one new component for loading this data table okay it will take some time now we can start our json server configuration for initiating the json server first we how to install this json server in your machine for that we have the npm command so let me copy this one here already our component is created anyway we first we have to complete our json server setup because it's not going to take much time so if you noted in the command we have mentioned this g so it will be installing in the global manner not for the single application so it is installing a newer mission in the global manner now let me go to our operating model here i am going to map our component so our common name is data table component and the path i am going to produce the user so let me create the link also so in this app component already i'm having the tool link i'm going to include one more link so this is for user okay we have done so let me check in the browser so you can see one more new link is added okay currently we don't have any data so let me go to the component so instead of the speed tag i'm going to provide h2 so the name is json server data table okay great so once we installed our json server b how to create a db.json file now let me go to the application so inside the source i'm going to create the file db.json okay so initially it's don't have any values okay then we have to provide the values so i'm planning to load the user information so already i'm having some data in the handy manner so let me include it okay so you know we have included so let me save it and the next step is be how to run this json server apa for that we supposed to use this command json server watch db dot json okay it's saying like oops the db.json does not seems to exist so creating the new db.json with some default extra data okay let me check so actually we have created inside our source folder we supposed to create in the outside of the source folder so let me copy all the contents okay i'm going to replace it here okay it's reloaded see the url so it's running in the for top three triple zero so let me copy this url see now it's returning all the records so basically it will work in our what's called our postman also so if you want include one more method then you have to copy this one so instead of the user i'm going to provide customer with the single data okay if there is any syntax error also it will throw an error okay fine the issue got fixed now you see we have the two urls one is for user and another one is the customer so how many objects you are defining based on that it will generate the url so for this example i'm going to use this users only so let me remove these customers okay now we are good to go now let me go to our application for accessing this service i am going to create one service here ng generate service i am going to create our service in the folder service and rest apa so the rest ap is nothing but our service name okay looks like our service got generated so here the spec file is not required so let me remove it and if you are using this http client service you have to include our http client model in our app.model so let me import it so basically this one is belongs to angular slash common dot http and the model name is http client model okay we have done let me go to the service so on the service be how to inject our http client now let me define my method and get all uses so return this.http the method is get method online here i suppose to provide the api world so this is my apa url let me include here okay we have done now let me go to our component side so in this our data table component so in the design point of view currently we don't have any data okay for loading this data table i am going to use the material every data table so let me search here we have the table so we can take the basic one let me copy this complete table section and the cs side see i said we have one small change and the final one is ts file so if you noted in the ts file they have included some default data so anyway let me copy everything okay datas we have added and the second thing is b how to define our display columns and our data source so we can check our output can't bend the data source it's not on the unknown property yeah actually if you are using this material uv data table we have to include some models in our app.model so the name is matt table my table model it's actually not coming then we have to import manually so let me copy this one so instead of this card i'm going to use table and model name is mac table model so now we are good to go and i have to include in this import section okay hopefully our error got resolved but the design is not looks good so in the table side i'm going to provide the stylus so the design basically how to manage in your own way that's fine okay see now uh currently we are able to see our hard-coded data but actually we need to load our dynamic data from our json server for fetching this data i am going to create one function first get to all users and here i'm going to use our services so let me inject the service first private service and our service name is rsjp so this dot service and our method name is get all users so let me subscribe it here i'm going to write one call back function okay we have completed our callback function now let me create one variable user data and data type cne basically we are going to use the array online so actually we need to create one interface and we need to convert everything so avoiding that i am just declared using the data type of any so i am going to get our response into our user data okay we have completed so let me format it first i want to check we are able to get all the values so i am going to include this user data into console and also i am going to call this getall users in our onload function so let me cross check see in the console i am able to get this array so in the array i am able to see all the user information a code name salary and also the role that actually we have added in our db.json so in case if i'm trying to add one more record i'm going to copy the one of the object so instead of these 210 i'm going to provide 211 and instead of this williams i'm going to provide williamson okay now let me refresh our ui see now we are getting this 11 records so the final one is williamson okay now let me try to bind these values into our table first let me go to our gs.json file so in the display columns first i'm going to provide code and the second one is name and the third one is salary on this role okay let me go to the html side so if you noted in the html table so in the data source side currently we have included this data source variable so instead of that i am going to use my user data okay so after that we have to define our columns the math column definition is first one is code and the header name so you can provide your own name and the binding data so i'm going to provide the code that's it and the second one is name and the third one is actually salary salary and this binding variable also salary and the header name okay the final one is roll so we have defined the small role only so let me use it okay we have completed so let me refresh it see now our user datas are loaded in our table and here after we can apply the pagination shorting and search options so already i created the separate video on that so i'm not going to duplicate everything here so i'll share the link in the description you can watch it i hope you got some better idea about this json server as jps still if you have any doubts or clarification please post in the comment box so in the future definitely i am going to create one credit operations using this json server cpa please stay tuned and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 11,335

Keywords: json server rest api in angular 14, how to install json server in angular, configuration for json server rest api, material ui datatable, how to load data from json server rest api, how to run json server rest api, how to load table from json server rest api data, load material ui table using json server rest api data, basics of json server rest api

Id: SGX0rSYf6ZY

Length: 15min 33sec (933 seconds)

Published: Tue Aug 09 2022