GET Data from API & Display in HTML using JavaScript Fetch API

hello everyone this is Manoj welcome back to my YouTube channel in today's video we'll see and learn how we can bind a HTML table using JavaScript and CSS as you can see on your screen this is a HTML table and I'm using one API that is a fake products API and using JavaScript we are binding these products as you can see the ID title description price and thumbnail there are other so many details but for this uh video and for your uh information we are using only uh five columns all right so if you come down so we have around 30 products all right so we'll do the same uh using a dummy API and JavaScript to mind the same HTML table all right so let's go back to visual studio code so let's add a new file new file and give it a name products. HTML products. HTML and here we have to write HTML syntax so the first tag should be HTML and let's include one head and also one title and products table binding with JavaScript and CSS all right and afterhe let's add the body tag save and in this body let's use one H1 tag sorry product details and after that let's add a table and before that let's go back to the browser if you see here we have this API dumy jason.com slpr products so basically this gives some data so let me show you how we can uh see the exact properties and values so let's select all and go to a new tab and here type Json viewer and if you see the first one here okay so paste your Json response here and go to viewer so you see we have a uh array of 100 products so expand and if you expand the first object so here we have ID title description price and discount percentage rating everything all right so again if you again format this so you can also see clearly all the properties and other details all right so go to the vs code and let's add Tad first so here we'll use our headings so inside TR let's use first T head and the first one is ID so let's paste ID and inside another Tad we have title and then we have okay description let's make first character as capital and then I think we have price yes and then we have discount percentage and then we have rating so here another th rating and then we have stock and let's use the thumbnail okay th thumbnail or let's also include the category we have a category property also okay so which one is left oh brand is left so let's copy this after stock past paste brand okay save so I'm using live server so that's from the live server so we can see it directly on the browser so here we go so we have H1 tag and we have a table header so let's make it little uh uh beautiful so here type bootstrap and and from here okay here so let's copy this stylesheet link and paste it in your head save and we also have a jQuery file so let's copy that also and paste it here save and now let's give this class name so table table let's say hover save go back to our page perfect so we have a responsive table now if you expand you see perfect now go back to the vs code and after that here we have to add one t body and inside that we have to write our logic all right so let's include T body and inside this T body we will use our Dynamic created number of rows all right so first of all let's give this T body as ID so let me give it let's say table rows save and so first of all let's add one script tag here and inside this we'll use the inbuilt fetch API which is uh JavaScript API so simply type Fetch and inside this we have to pass a URL which URL this one this URL is a gut URL and it is giving 100 products so simply copy and paste it here and after that dot then and here we can check what response we are getting so if I do this so result console. log result and finally if there is any error so dot catch and error so console.log error okay so first of all let's see uh in the in the network tab if we are getting products from this API or not okay so let's go back to this here and go to developer tools go to our Network tab here and let's refresh so you see we have a API and in the response we are getting one array of multiple products okay and if you go to the headers so this is the URL this is the request method and we got status code AS 200 means our API calling is successful all right so our we can we are able to get the response from the API perfect again go back to vs code so here let me comment out this one so we don't need any uh this console.log here because we have to bind our products all right so now let me remove this also and here we have to bind our products all right from the result from this object so first of all let's create a variable let's say cons data and result RS do products if you see here why I give this uh ARS do products because if you see here uh here so everything is there in this product array so this is the parent property all right so now if I do uh rest. products then in this data we'll get all the 100 products these one okay so after this we have all 100 products now let's create another variable called rows and make it as blank and after this we have to do a for each Loop so data dot for each data dot for each and here let's pass product and here we have to append some details on this rows so let's say rows plus equal and if you see Let me give like this one so first of all we have to create a TR so open close TR tag and then we have to create our TDS so let's open one TD and close TD and inside this we have to create our values from the response so if you see the First Column is ID okay so here simply pass dollar and curly braces so we are using backtick so we don't need to do any uh further concatenations we can create a single line using this and we can pass a dynamic values so the product do ID all right save and let's copy this let me paste one more time and here let's go to here and expand this let's copy this title so second one is title third is description so copy this description and paste then we have price so copy price paste let me copy paste okay so after price we have discount percentage and rating so after price discount percentage and then we have rating so copy and after rating stock brand category stock then we have brand then we have category and finally we have thumbnail paste okay so now what it does basically we are applying a for for each loop on this data so each time it will go to all the products and get the values of like ID title description and it appends this rows by this complete string or you can say the HTML text all right so once we are ready with this HTML or you can say this variable which contains all the products whatever is there in this data so after that we have to append that particular data to this uh t Okay so let's copy this ID table rows and here simply type document dot get element by ID and here we have to pass the ID which is table rows and then we have to give one property called inner HTML and simply pass this data okay so not data this rows let's save this and let's go back to our browser here let me refresh okay if I go to inspect go to network and if I refresh okay we are getting the response let's see go back to vs code and here oh okay the thing is from the fetch we cannot get the data or the response like this we have to uh convert that data into Json all right so first we have to do this like then response response. Json all right now if I save if I go back to this refresh oh we have a typo mistake so this is for each let's save perfect so now let me close the developer tools so we have all the products here all right perfect now if you see the thumbnail I mean we cannot see the image here we can only see the path of a particular image but there is no image tag or no image element so let's add one image element here so go to the last TD and here let's add image tag and for the source property let's use the this one so this is the source and let's also add some style because it will be a big image so let's add style uh and let's give withth as let's say 20% so save perfect so you can see we we are able to see the thumbnail also and within the image element perfect so this is how we can um render a list and if you want uh to display the title when you h on it so you can simply add the all tag and let me copy this complete and paste it here and give as title and also for image we have very important uh attribute called alt that is the let's say if there is a problem to render this image then we can see uh this all tag instead of this image all right so let's save go back to here and if you hover so it will display the source value all right so this is how you can simply uh use an API in JavaScript and you can render your products and if you want you can also add like add a delete button here so you can do whatever you want using JavaScript also you can do uh any crud operation if you want you can hit any API let's say there is an net core API there you want to post data or put or get data so you can do without adding any third party API or any third party package all right so this is about today's video and I hope you like this video if you did so hit the like button share comment and if you are struggling or you're facing any kind of problem in your college project or in your internship so you can contact me on my contact details you can find my contact detailss on my channel description so you will find my Instagram handle my Facebook handle and you can also find my uh WhatsApp number there so you can directly ping me so I'll I'll try to help you out all right so see you in the next one thanks for watching take care bye-bye

Channel: Manoj Deshwal

Views: 6,006

Keywords: javascript fetch, js fetch api, fetch api json, fetch data, get data, js get data, js fetch get, fetch get request, fetch http get, fetch data and display, javascript fetch api, render data, get data and render, fetch data and render, fetch data and render on page, fetch api crash course, insert data in html, fetch data dom manipulation, manoj deshwal, connected programmer, openprogrammer

Id: HIKQlr33pn4

Length: 17min 22sec (1042 seconds)

Published: Mon Dec 18 2023