How to create JSON Server and Fetch Data For Front-end

hey everyone and welcome back to daily tuition in this tutorial i'm going to show you how you can create json server and filter the data we're going to create this beautiful ui and filter all this employee data using json server if you don't know about json server then let me explain json server allows us to make fake rest api for front-end json server actually create an express server and create the fake rest api for the front-end developers so for example let's say if you're working on front-end and you want some fake api data from the server for testing then you can use and create json server so let's take a look at how to do it i'm going to open the virtual studio code editor and inside this i will open an empty folder and inside this empty folder i'm going to create a new folder and i'm going to name that folder database later in this course i'm going to create db.json file inside this database folder where we're going to put all the data of the fake json server so once you have this folder let's create a new file in the root directory and i'm going to name it index.html just out of that i'm going to create here index.js as well this is the javascript file and i'm going to link this javascript file to the index.html so here i'm going to create exclamation mark press tab so this will create a simple html5 snippet something like this and i'm going to name this json server and inside this index file right down here before the closing body section i'm going to add a script tag and link my index file so i'm going to say here index.js save these changes and now inside this body i'm going to create this beautiful ui so to create this ui i'm using delve in css so i'm going to open new tab here and search for delvin css and from this tailwind css.com i'm going to click on this get started and then i'm gonna click on this play cdm from this play cdn i'm going to copy this script tag right from here just like this and put this script tag in the head section of the website so if i just grab this script tag and put that inside this head section like this then i can use all the classes of this delvin in my project this is easy right now to start that here i'm going to create a simple container a container class and then add here mx auto to center this container and inside this i'm gonna create h1 heading tag with the text json server let me save the changes and open this in the live server so i'm going to right click here and say open with live server so once i have my index.html in the live server let's specify some television classes to beautify this so to this h1 heading tag i'm going to specify classes of delving so i'm gonna say here class i'm gonna first specify text center to center this json server text something like this then i'm gonna specify here text for excel this will specify font size to this json server just for that i'm going to specify text indigo 400 so this will specify color to this text and then i'm going to specify some padding to it panning by 12 so this will add top and bottom panning something like this just out of that just out of this h1 heading tag right down here i'm going to create a table and to this table let me first specify some classes of delving so i'm going to specify here class so i'm going to first space over here mim with full so this class is going to specify minimum width to this table then i'm going to specify divide y and then i'm going to specify here divide gray 200 just for that inside this table as you know you have table head so i'm going to create here table head something like this and to this table here i'm going to specify class bg gray 50. just out of that inside this table head here i'm going to create table row and then i'm going to create the h stack inside this th i'm going to specify here employee text something like this and then i'm going to specify some classes to this th stack so first i'm going to specify padding x6 so this will specify left and right padding then i'm going to specify padding by 3 so this will specify top and bottom padding then i'm going to specify text left this will align the text to the left side and then i'm going to specify here text x s so this will specify font family then i'm going to specify here font medium so this will specify found width then i'm going to specify text gray 500 then i'm going to change this to uppercase something like this and then i'm going to speak over here tracking wider something like this so once we have the table data let me copy this th paste it just down here and this time i'm going to change this employee to status copy and paste the th tag again and then i'm going to change this employee to role save this so this will create a table here you can notice here so now once we have the table head let's move to the table body so just out of this table here just on here i'm going to create table body so here i'm going to create t body the t body tag and then i'm going to specify class to it which is bg white this will specify background color white to this t body then i'm going to specify here divide y so this will add a divider to this t body oops i think i misspelled the spell here divide then i'm going to specify color to it divide gray 200 and then i'm going to specify id to it which is going to be t body so we can easily access this t body using javascript inside this body section of this table i'm going to create this data we're going to first add the employee profile then add the name of the profile email the status and the row so to add this inside this t body right down here i'm going to create table row so tr tag and inside this i'm going to say here td table data and to this table data let me first add some classes to this table data i'm going to specify class padding x6 so this will add a left and right padding and padding y four to add top and bottom padding just out of that i'm going to add here white space no wrap let me save the changes and just start that inside this th right down here i'm going to create a division tag enter this deep i'm going to specify class flex and items center and inside this div i'm going to create another div with some classes so i'm going to specify class flex shrink zero now because i don't want to change the size of the image i use here flex showing zero then i'm going to say here height is going to be 10 and width is going to be 10 and inside this div i'm going to add my image so i'm going to add here img tag and the source attribute i'm going to put the url of the image but first let me specify here some classes i'm going to add here class h is going to be 10 and w means with is going to be 10 then i'm going to just specify here rounded full so this class is going to specify rounded border to the image now inside this source attribute i'm going to grab the url and paste that here don't worry you can grab all this url and this data from the link provided in the description now just are that once i have my image let me save the changes so you can see i'm gonna have this image here just out of that just out of this division tag right down here i'm gonna add another div with margin left four so this will add some left margin to this division tag and here i'm going to add another div for the title so i'm going to create here a division tag and then here i'm going to specify class text sm font is going to be medium and text gray is going to be 900 and inside this div i'm going to specify the profile or you can say employee name so i'm going to say here gen copper so i'm going to just put here random data and then i'm going to create another div just down here just out of this div i'm going to create another div something like this and then i'm going to specify classes to it and to this day i'm going to specify email of this user so for example if i put here email of this user and then i'm going to specify some classes to this so i'm going to specify class text sm this will specify font size then i'm going to specify text gray 500 like this now once i have this just out of this division tag just out of this td right down here i want to add the data for this status so just out of this td we have another td tag and as you know we already have classes to this dd this one px6 and py4 with this white space no wrap i'm going to copy this and specify that to this to the tag something like this and inside this i'm going to add a spawn tag and add here active status and then i'm going to add here some classes of delvin so i'm going to add here padding x2 then inline flex then i'm going to specify here text xs so this will specify font size then i'm going to specify here leading 5 font is going to be semi bold and then i'm going to specify here rounded full and bg green 100 and text green is equal to 800 something like this so this will add the active status inside the project you can see here just out of that once you have the active status just out of this spawn tag and just out of this td i'm going to add a data for this role so i'm going to add here td again with these classes so i'm going to copy these classes and specify that to this td and inside this td i'm simply going to add a spawn tag and specify here admin save the images and then i'm going to specify some classes to this pawn class is going to be text sm and text gray 500 that's it now you can see the ui is now completely ready let's create a json server and grab the data from it and generate different employees here now once you understand how we can create this beautiful ui let's move to the back end we're going to create a rest api server to provide the data to this front end and add multiple users here so let's see how to do it so what we're going to do is i'm going to add here json server inside this project to add that i'm going to open my terminal you can just head on to this terminal and click on this new terminal so once you open your new terminal change the directory and enter into your project i already in my project so i'm going to just type here a command call npm i for install and then i'm going to space over here json server now if you don't know about npm npm is a node package manager allows us to install different packages i have a complete course on node you can check out that course from the top right corner of the screen or from the description i hope you already have node installed in your local system this command is going to install json server in your project but before that we need to initialize this project as npm package so i'm going to just type here a command called npm init hyphen y to skip all the questions and press enter this is going to create a file called package.json and inside this file we have the all configuration of this project you don't have to worry about this file just close it and just clear the screen and here you need to say npm iphone install and then install json server so we are installing json server package from the npm so as you can see once i have json server in my project you can see we have the node modules and inside that we have the json server and if you open the package.json you can see you have the dependencies json server now once you have json server installed let's create a file inside this database inside this database i'm going to create a new file and i'm going to name it db.json that's upon you you can specify any name to this file but the extension need to be json so i'm going to create here db.json and inside this json file i'm going to put some demo data so what i'm going to do is i'm going to create here an object make sure you first create an object so i'm going to create here an object something like this and inside this i'm going to put user data so i'm going to say here user colon and pass here an array and inside this array i'm going to put all the data of the user so this is a key and this is the area of object so inside this area of object i'm going to grab the data of the user and paste that here something like this so in this data i'm going to put the id the name of the user email the profile means the user image then we're going to add the status and the row so now what we are going to do is i'm going to add multiple data here something like this i'm going to have four users inside this user adding so once i have this data inside this db.json let me pass this data to the json server so we can access it using routes in the previous lecture we created the json file and used that in the fetch function so we can easily access the json data that is not a great way to access the data from the json instead using rest api you can make crude operation on your data you can add delete and update your data using rest api so what we are going to do is i am going to pass this db.json to the json server so json server is going to create routes for this data so let's do it let me close this file let me save these changes and close this file and inside the script right down here i'm going to create a new statement i'm going to say here start and then i'm going to specify here json server the package name and then i'm going to specify watch flag so whenever we make any changes inside the db.json this watch flag is going to restart the server just out of that add a space here and then add the file path of your data so i'm going to say here dot forward slash database dot db.json so you have your file inside this database folder so i'm going to specify the path of that file something like this save to changes and now open your terminal clear the screen and just type a command called npm start and when you press enter this is going to start the json server you can see and you can access your resources using this link so for example if i copy this link and paste that here then you can notice you can access all your json data from here now what i want i want to grab this data from this json server and iterate over this object and create my users so to do that just back to the index.js right down here and here i'm going to simply first create a function for the table data as you know we have a user inside this table data so let's grab this and create that inside this index.html we already learned that in the previous lecture how to grab the data from the html and create html using javascript so i'm going to create here a function called create table data so i'm going to just see here create td i'm going to say here function td something like this and then i'm going to pass here curly braces inside this i'm going to say let td is equal to document dot create element and i'm gonna create table row as you can see i'm gonna have here table row so i'm gonna first create this table row tag and then i'm gonna grab this td and then specify here inner html and inside this inner html i'm going to specify all this td data so to do that i'm going to add here template string so i'm going to add here template string syntax something like this grab this data from the index file and paste that here like this here i'm going to pass colon and then i'm going to add here return td let me save the changes and now let me call this dd function if i call this td function nothing will happen because as you know you have to append this data inside html element so i'm going to just grab table body so i'm going to say here let d body and then i'm going to specify equal to sign here and then i'm going to say here equal to document dot get element by id and i'm going to grab the table body id this one i'm going to grab this id and access this table body and i'm going to import this td function inside this t body so i'm going to say here t body dot append and i'm going to put this td function inside this parenthesis something like this see the changes now you can see you have your second user here so this is going to append this user inside this table body what we need we need to grab the data from the json server and pass that to this html so let's see how to do it so let's grab the data from the json server so just up here i'm going to call fetch function so i'm going to say here fetch inside this parenthesis i'm going to put the url of the resources so as you know in the terminal you can see you have the resources url of the user so let's copy this and specify that inside this parenthesis just out of that just call then method because this is going to return a promise so i'm going to say here then response call a callback function here and say console.log and i'm going to print this response let me save this in my console you can see the response data here now in the console you will get the status score 200 which is the valid request status text is okay type is core and you can easily access the url of your response now just for that i want to get the data of this index.json file so i'm going to first convert this data into json so i'm going to say here respond dot json and then i'm going to call the chain method which is then and then i'm going to say here json and see here console.log and i'm going to print my json here something like this save the changes now you can see i'm going to have the data what i want so this is going to return an array of the object now just out of that we're going to iterate over this area of object and grab the data from this json server so just inside this function i'm going to say json dot map i'm going to call the javascript map method and then i'm going to call here data and then i'm going to say console.log data so this is going to iterate over the array of object and print all the objects here so once we have the object inside this data i can access the values of this object for example let's say i want to access the name from this object i can just simply pass here dot name so this is going to return all the name of this employees so now once you have the name we can pass this name to this dd function and specify that right here instead of this hard coded value so instead of this hard coded value i can just simply specify here name and then instead of this hardcoded value i'm going to add here dollar curly braces and pass here name something like this so now when i call this append function i can pass this name data to it so i'm going to grab this td function and this t body append right from here and pass that inside this callback function and to this td function i'm going to pass this data dot name like this save the changes as you can see i'm gonna have my data here so this is going to specify different names to all these employees now just for that let's specify all this data to this ui for example let's suppose if i want to specify image url i could just simply get rid of this and then here i can specify dollar curly braces image or you can say img and then i can pass here img parameter and when i call this td function i can then pass here data dot profile now because we have this image url inside this profile key i'm going to grab this profile key and then specify here data dot profile let me save the changes and show you the result as you can see this will change the image of this ui let me just get rid of this first data from this index.html right from here i'm going to grab this tr and get rid of it save the changes and as you can see i'm going to get all this data from the rest api now what i want instead of passing this data to this function i can simply use javascript destructuring for example you know that inside this data object you have id email profile role and status instead of passing all this data as a parameter one by one to this td function you can simply pass here object and then here you can pass profile name and then instead of these parameters you can simply pass here data that's it so this data is now the structure with this function and then i'm going to pass this value to this html save the changes and as you can see you'll get the same result here now just out of that as you know inside this object we have name profile role and state so let's specify this so i'm going to get rid of this hard coded email value then specify here email get rid of this active status this active hard coded value and then specify here status and this admin became roll something like this and don't forget to add these variables inside this object so we can destructure this data from this object so i'm going to say here email status and raw so i'm going to just restructure all this data from this object let me save the changes and as you can see i'm going to have the data from the rest api we have the unique data to all these users now what i want i want to filter this data using json server in the previous lecture we understand how we can filter the data from the front end we grab the data from the server and filter that using filter method but when you grab the data from the server you are also going to get the unnecessary data so what we're going to do is we're going to filter this data and request only the needed data so instead of getting the whole data when you make a request we're going to filter it and make a filter request for example when you start the json server you will get the user route now using this user route you can make a filter request for example let's suppose you want to get first id you can simply add here question mark then specify id the key name and the value one see the changes you can see you're only going to get the first id if you want to get second id you can specify ampersand and then add here id to you will get id1 and id2 so this will just filter this data and return the result what you want just for that for example if you want to filter this data and you only want this first name you can just simply add here name is equal to and you can pass this name here save the changes you can see you will get the result what you want just for that you can filter the employee with the status code as well you can just pass your status is equal to active so this is going to return all the active status you can also search for the members as well so if i just specify here role is equal to remember let me save the changes so using this technique you can filter your data and request only the data you need now once you understand how i can filter this data i have a simple exercise for you what you have to do is you have to create here different tabs with active inactive member owner and admin and when the user click on any of the tab you have to filter that data for example if the user click on member tab you have to filter all the employees with the member role if the user click on the active tab you have to filter all the employee with the active status so this is the simple exercise for you so i hope you understand how you can create json server and test your front end using mock api if you find anything useful don't forget to press the like button share this video with your friends subscribe for more latest videos that is all for now i will see you in the next one [Music] [Music] you

Channel: Daily Tuition

Views: 638

Keywords: How to create JSON Server and Fetch Data For Front-end, how to make json server, how to access json server api data, fetch data from the json server, how to, make, tutorial, making, getting data from the json server, how to create json server to test front end api, working with api, making mock api, working with mock api

Id: NM4gB8J1uF4

Length: 27min 37sec (1657 seconds)

Published: Mon Dec 13 2021