JavaScript Fetch API || Fetch data from API and display data into browser.

hello everybody i am khanam and in this project we will see how to fetch data from api and how to display that data in our browser okay in our website you can display this data when you create your website you can directly fetch the data from the api you don't have to write the code for each one of the card you can just fetch the data and you can display that data okay whatever data you can see here that i got from the api i have not focused much on styling part you can see here or i have only given these cards okay i have just written some basic code so that we can get the data in proper way okay i'll just open my vs code editor and inside this you can see i have already created one folder fetch api inside this i have this index.html script.js and style.css inside index.html first i'll be writing h1 and for this i'll just give the class name as heading i'll just give the class name heading and inside this i'll just write this one okay i'll just come here i'll copy this and here i'm going to paste that one okay you can give your own stylings only to display the cards in a proper way i am just giving this files i'll just give her id for this div i'll be keeping the id as cards inside this diff i want all the cards should be displayed so for this i'll be giving class as card inside this first i'll be having h1 for this i'll just give the title class name as title and inside this i'll be writing here title okay only to display that one i'll write title next i have image i'll just leave empty and inside alt i'll be writing image below this i'll just write paragraph and inside this i'll be having description description of my data below this i'll write one more paragraph and for this paragraph i'll just give the class name i'll be giving the class name class i'll give it as category okay so that i can give some stylings and here i'll be giving category below this i'll be creating one more paragraph and for this i'll be giving the class name as price and inside this i'll just write here price okay just imagine this is my first card which is having all the data and instead of this one i'm going to display the data from the api okay now if i just refresh this project you can see i'll be having this heading i am having this title this image that is alternative description category and price i'll just come to google i'll search for apple and here inside images i'll just copy this one and instead of this source i'll be pasting that path here i'll save this now if i refresh this one you can see i'll be having this apple i have this image i have this title okay now we are going to do the styling for this okay we are just doing the simple styling okay i have very large link i just i'll just delete that one instead of that i'll just come to pixels.com i'll just copy this and here i'll be pasting that one i'll save this now if i refresh this one then say i'll be having this image and i have the description category and price okay now we will be doing the simple styling i'll just come to style.css and inside this i have just written this basic padding 0 margin 0 and box sizing to be border box i'll just come here i'll copy this class and here i'll be pasting that class okay for this class first i'll be giving text align i'll just give text align to be center i'll just increase the font size font size i'll be giving three ram i'll save this now if i refresh this one you can see my text has come in the middle and also the font size has been increased i'll just give margin bottom for this so that i can get some space from below margin bottom i'll be giving 1.5 ram and also i'll just give the font family font family i'll be giving this gil i'll save this now if i refresh this one you can see i'll be having this font family and margin bottom i got of 1.5 rim okay next i'll be styling this this cards i'll just copy this one and here i'll be pasting that one that is my ib so i'll be using this hash i'll just write the cards and inside this you can see first i have this card i'll just copy this one i'll just copy this entire card and here i'll be pasting that one second card i'll save this now if i refresh this one you can see this is my first card and this is my second card okay i want on side by side so for that i'll just come here i'll be giving display to be flex i'll just give a display flex i'll save this now if i refresh this one you can see my card has come on side by side okay in the same way i want to display the data here side by side so i'm just tiling this one okay now next i'll just give one more property i'll be giving justify content i'll just give you justify content to be space between i'll just give around i'll save this now if i refresh this one you can see whatever space i was having at the end that has been divided between this cards now next i'll give one more property that is flex wrap okay so that i will not be getting horizontal scroll bar i'll just give flex wrap to be wrap i'll just write here wrap i'll save this now next i'll just copy this class and here i'm going to paste that class okay i'm just giving normal styling okay you can just keep this part if you want for this card i'll be giving with with i'll just give 23 percent i'll save this now if i refresh this one you can see my card will take only 23 percent of the width now for this i'll be giving box shadow box shadow i'll just give it a 0 0 4 pixel and finally i'll just give it 3 pixel spread i'll just give a pink color i'll save this now if i refresh this one you can see this is my card which is having this box shadow and because of my image it's not looking good here i'll just give a text align text align center i'll be giving padding padding i'll give 1.5 m and also i'll just give margin bottom so that whenever i cut extra whenever i add extra cards below i should be having margin bottom of 2m i'll save this now if i refresh this one you can see i'll be having this output margin bottom also i got i'm going to style the image now now if you see here you can see i got i have here margin bottom so for that i am giving here margin bottom of 2m so that it will not get stuck now next i'll just change i'll just copy this title and here i'm going and here i'll be pasting that one and for this title i'll just give font size font size i'll be giving 1.3 rem i'll save this i'll just come here now if i refresh this one you can see my font size has been decreased now i'll just come here i'll copy this category class and here i'll be pasting that class and also for price i'll be giving the same styles and for this first i'll just give giving font weight font weight i'll just give here bold next i'll be giving text transform text transform i'll just give it capitalize i'll give one more property that is margin margin of 1 m and finally i'll just give here font size font size i'll be giving point to rem i'll save this i'll just come here now if i refresh this one you can see the category and price all the styles have been applied now next i'll just style my image okay for my image here i'll just give one class i'll give the class name as images i'll copy this one and here i'll just save this and here below before my title i'll be pasting that class and for my images i'll just give her width width to be 80 percentage i'll save this now if i refresh this one you can see my image is taking 80 percent of the width okay here it's not been applied i'll just come to index.html this class whatever i have added here i'll be giving for this image as well i'll save this now if i refresh this you can see i'll be having this image here i have like this i'll just come and i'll just check for the error i have this cards and inside this i am having this first card okay this will be my second card i'll just remove this dip from here this will be my second card and i am wrapping that inside this card i'll save this now if i refresh this you can say i'll be having this output this kind of output i want when i fetch the data from the api okay now i have just done the simple styling now if i just copy this card i'll just copy this card again and here if i paste that one three four times i'll be pasting that i'll save this now if i refresh this one you can see i'll be having my output like this and all the data whatever it's displayed i should be getting directly from the api okay i don't need this images i don't need this title instead of this i want this proper heading proper description and proper price everything and also i'll be getting image from the api now we are going to do the javascript part okay you can just keep the styling part i have just done the basic styling if you want you can just refer this one but i really suggest you to do own styling and explore the styling part as well now i'll just come to javascript file and before that i'll just show you i'll just link my javascript file here script src and i want to link my javascript file okay now i'll just remove this cards from here whatever i pasted i'll just keep one card i'll just remove all the cards i'll save this now this files will be applied when i fetch the data from the api now i'll just refresh this one now i have only one card here i'll just come to javascript here you can see i have written some definitions here our fetch method it is defined on the window object which we can use to perform request okay this method will return promise and promise is nothing but either you will fulfill the promise or either you will reject the promise okay i have already made the video on promises if you want you can refer that video or you can just explore youtube you will find tons of videos on promises okay promise is nothing but either you will be fulfilling the promise or you are not fulfilling the promise which means that if you tell your mom that you are going to clean the room by end of the day by end of the day either you will clean the room or you will not clean the room okay that is called as promise for fulfilled we have resolve and for reject we have reject fulfill once your promise is get fulfilled to display the data we have then method for reject we have catch method okay now we are going to see how to fetch the data using fetch method we will be fetching the data now here i'll just write here fetch inside this we have to paste the api link just come to google i'll just close this one now now here i'll just write here fake api store just type this one click on this and here you will be having this link open this link okay inside this documents come to documents and here you will be having this api link copy this and here if i show you the output you can see this is my api and from here we are going to access the data i'll just paste that link here api link we know that our fetch method is going to return promise okay it will return promise so to when our promise get fulfilled we have to use then and inside this then i'll just give one argument i'll be giving data inside this data argument all the data from the api this entire thing whatever it's visible that will be stored inside that argument okay because this fetch is returning promises and whatever data i am having here that will be stored inside this one now if i just show you console.log and i'll just give this data i'll save this now i'll just come to my project now if i refresh this one i'll just open console now in my console you can see i'm getting this response okay inside response i am having this body body used okay status i'm having everything and also i'm having this url which is giving me all the api data this data and here inside this body you can see i have this readable stream and here if i open i am having this prototype okay this is very important this body now once i get this response i have this data in json format you can see this even the name even the name field is enclosed in double quotes which means that my data is in json format my value is also enclosed in double quotes you can see double quotes and here also double quotes so i have to convert into javascript object to convert that one i'll just return here whatever data i am having here i want to convert that into object okay this is the json method if you write this one whatever json file you are having that will be converted to object now here this will be either be fulfilled or this will be rejected i am just assuming that it is fulfilled and inside then i'll just pass this i'll be giving my argument as complete data okay this is the data which is converted into object okay this here i have converted to object that i am passing here now if i do console.log and inside this i'll be passing this i'll copy this one and here i'll be pasting that i'll save this now if i refresh my project you can see here i'll be having array of objects here okay that is my output and inside this i'm having all this data you can see i am having all this 20 data length is 20 which means that my array index starts from 0 and i am having total 20 data here whatever data is visible here that is been displayed in my console here okay i am just converting the json data whatever data i am having here that is in json format i am just converting it in object format and i am just giving this in then which means that fulfilled and i am just passing the data and i am just consoling that data in my console now here inside complete data i am having all this data you can see i'm having all this data now this is array of objects you can see this square brackets here this is array of objects now if i want to access only the title i'll just come here now if i want to access only the title title of array index 2 i'll just give it 2 and i'll be giving here title i'll save this at array at array index 2 i'm having this men's cotton jacket i'll refresh this one you can see here i'll be getting only that particular output men's cotton jacket okay we can access this data now we have access this data now i want to display this data inside my browser okay instead of this card whatever card i am having instead of this one i want to display this data in my browser so for that i'll just close this one now now here i'll just write one small example here i'll be writing here document document dot get element by id and inside this i'll just give the id as root i am just giving the id as root dot inner html i'll just give this entire thing i'll just copy from here and here i'll be pasting that one whatever data i'm getting i'm just storing that one now here i'll just come to index.html here below this i'll just give one div and for this i'll give the id as root i'll save this now if i refresh this one you can see here i'm getting this output okay men's cotton jacket okay now this is how we are going to display the data we are going to access html elements using this using our selectors and we are going to display the data now once i am done with this okay i have shown you how to display this particular data now we are going to display all the cards from the api i'll just come here i will be removing this and also this console i'll just remove this now here inside this then okay if i get some error suppose if i get some error we have to handle that one by using catch and inside this it will take one argument that is nothing but our error i'll just do console if i get some error should just display me the error i'll just write here error okay now you don't have to worry about this now we are going to work inside this one where i am having all the data now here i'll just create one variable i'll give my variable name as data1 i'll just give empty value for this i don't want any data inside that variable now here using math method okay using math method i'll be accessing all the data and math method i'll just write here this this is my array now okay this is my array i'll paste that one because i have accessed that one using index number so this is my array here i'll be using map method math method will take three arguments first is my current value and this value will run for each element inside the array and it will return me the output next it will be having index number and third it will be having the array which we are working on so first i am just using the first argument that is i'll just write here values you can give any names here now this values will be having all the data okay these values will be having all the data which means that i'll just come to my browser and now if i show you here first it will take id number one okay this complete id number one as its first data then again second it will take this data and third it goes on okay first it will take first second time second third time second so it will be having all the data of my array now once i'm done with this here i'll just uh here i'll just give my variable name which i have created here i'll just give here equal to and inside this template literals template literals are nothing but backticks and inside this one i'll just come to index.html this entire card i'll just copy this one and here inside that i'm going to paste that one whatever card i have written here whatever stylings i have done for this card i'll just copy that one and here i'm just going to paste that one i'll just comment this and also i'll be removing this diff from here i'll save this now i have this ids card so i'll be accessing this one now i'll just save this now instead of this title i want i'll be using template literal so to access the variables we have to use dollar symbol and inside curly braces i want this values now this value i will be having all the data inside this value and here i want to access this title here okay you can see here title i'll just copy this one and here i'm just going to paste that one okay to access the objects i'll just write like this values.title now instead of this source i'll just remove this from here and instead of this i'll be writing this dollar values dot image whatever name i'm having here that is image you can see here i'm having image i'm just accessing that one next i have here if you see here i have this description here i'll just copy this one and instead of this description i'll just write this values dot description i'll just close this one okay next i have this category i'll just remove this and instead of that i'll be writing that one dollar values dot category now finally last i will just remove this values dot this one price i'll save this now if i show you the output you can see i will not be having anything because i have not accessed the id at here below this i'll be accessing the id document dot get element by id and my id name is i'll just come here you can see here i want to access this id i'll copy this one and here i'll be pasting that one i'll be giving this inner html property which will be equal to this data i'll paste that one here just have to close with double quotes and save this now if i refresh this one you can see i'm having this first cut the data is being displayed i'm having this image i'm having this description this everything this category this price but the problem is i'm not getting this entire data entire cards i'm not getting i'm getting only this data and this data if you see here i will be getting this last data you can see here for last data i am having the title id i am having this title casual cotton at the last you can see i am getting this data okay i want all the data should be displayed so instead of this i just have to add here plus okay whatever data i am having that plus this that plus this now if i refresh this one you can see i am having all the data which i got directly from the api and it is displayed here i have not written code for individual products this i have written only once and i am just accessing that one using plus symbol and i am just giving this one and i'm just returning that one inside my map method and here you can see inside index.html we have only so much line of code and using this cards okay whatever using this and inside this div okay which is having the id i'm storing all my data you can see i'm storing all the data inside this particular div which is having the id as cards okay this is how you are going to fetch the data and you are going to display the data okay that's all for today's project thank you so much for listening have a great day

Channel: Step by Step

Views: 69,741

Keywords: javascript fetch api, javascript fetch api tutorial, javascript fethc tutorial, advance javascript, modern javascript tutorial, javascript fetch async await, javascript fetch api and promises, fetch api in javascript, khanam fetch api, fetch data from api and display in browser, complete fetch api tutorial, javascript fetch api json, fetch api javascript, complete javascript for beginners, javascript fetch api example, javascript fetch api projects, javascript fetch, api data

Id: m_vL25vzpiE

Length: 22min 4sec (1324 seconds)

Published: Fri Jul 30 2021